I am trying to make a mat-card navigable from the keyboard. Right now, when pressing tab the element is focused however the redirect event (should be the same as the click event) isn't triggered when pressing enter.
I've tried keydown.enter and onKeyDown (from a11y package) but no success so far.
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown.enter)="addQueryParam(group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript
addQueryParam(groupName) {
this.router.navigate(['/data'], { queryParams: { ['groups.title']: groupName }, queryParamsHandling: 'merge' });
}
Any idea how to solve this issue?
TIA,
Isabela
I suggest you two things:
try using (keyup.enter)=.... I used it a couple of times and it worked well
If that doesn't work try using (keyup) or (keydown) and in your function check if the key code is 13 (enter key code), something like this:
HTML
<mat-card role="group" (click)="addQueryParam(group.name)" (keydown)="addQueryParam($event, group.name)" class="mat-elevation-z0"
[ngClass]="'background-'+index" (mouseout)="mouseOver=false"
(mouseover)="mouseOver=true" style="padding: none; margin: 5px">
Typescript:
addQueryParam($event, groupName) {
if($event.keyCode === 13){
this.router.navigate(['/data'], { queryParams: ...);
}
}
If i remember correctly you can check the type of the event in a field like event.type, or something like that.
Additionally check this discussion out, because theese functions are not well documented, and here you can find som infos :
What are the options for (keyup) in Angular2?
EDIT
I also found this very useful article: https://medium.com/claritydesignsystem/angular-pseudo-events-d4e7f89247ee
Related
I've got a simple styled-components that is being applied to an antd component:
import { Card } from 'antd';
export const UsageCard = styled(Card)`
box-shadow: 1px 1px;
padding: 2px;
`
This creates a div with a class attribute that looks like : "ant-card edit-style__UsageCard-jsklqS hBLsXc ant-card-bordered"
Where .hBLsXc is my styled-component. Unfortunately the padding which is 2px in my styled-componentn gets overriden by the ant-card (0px).
Any idea why this is happening? The styled-components is supposed to come first since it's implemented over the thrid-party component. Is this a problem with the forwarding of className from third-party component I've read on multiple occasion? In any case, I don't really gets how this is supposed to work.
Thanks for your help!
The className has to be put in the Card Component, otherwise this will not work. You should check with antd to see if they did so. It has to look something like this:
const Card = ({ className }) => (
<div className={className}>
...
</div>
)
Here is the documentation for it:
https://www.styled-components.com/docs/basics#styling-any-components
edit:
I checked with antd and it looks like you can pass the className to it. There is a section in https://github.com/ant-design/ant-design/blob/master/components/card/index.tsx:
const classString = classNames(prefixCls, className, {
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-hoverable`]: this.getCompatibleHoverable(),
[`${prefixCls}-wider-padding`]: this.state.widerPadding,
[`${prefixCls}-padding-transition`]: this.updateWiderPaddingCalled,
[`${prefixCls}-contain-grid`]: this.isContainGrid(),
[`${prefixCls}-contain-tabs`]: tabList && tabList.length,
[`${prefixCls}-type-${type}`]: !!type,
});
You can pass the className via props. So this should actually work, but the passed className goes first, so I guess the antd styles will always override the styled-components ones, if they are the same. Maybe a fork might help?
I have a number of tabs, representing different services. I wish to have a final 'tab' tagged on the end of the list used to add a new service. Denoted by a simple '+'. This will open a simple dialogue.
I was hoping I could put my own ng-click behaviour on this single tab and prevent default but this doesn't work.
Is there any way I can 'catch' the tab click event BEFORE the tab body switch takes place and prevent it from happening?
It seems that it is not possible at the moment (see e.g. https://groups.google.com/forum/#!topic/ngmaterial/rNWMk3S9uDI) - at least using official api.
If you are ok with a solution which hacks into the directive internals then you can do following:
angular.module('MyApp').directive('tabWatcher', function() {
return {
require: ['mdTabs'],
restrict: 'A',
link: function(scope, el, attrs, controllers) {
var mdTabsCtrl = controllers[0];
var origSelectFn = mdTabsCtrl.select;
// overwrite original function with our own
mdTabsCtrl.select = function(index, canSkipClick) {
if (...) {
origSelectFn(index, canSkipClick);
}
}
}
};
I've placed a demo here http://codepen.io/jarek-jpa/pen/wGxqOq . Try to click some tabs. The select() call will be intercepted and depending on a condition let pass or not.
Disclaimer: Again, it hacks into the md-tabs directive internals, so may stop working any time (tested with angular-material 1.0.7)
You can set pointer-events to none to prevent the md-tab from responding to clicks.
Example:
<style>
md-tabs.readonly {
pointer-events: none;
user-select: none;
}
</style>
<md-tabs class="readonly">
<md-tab label="can't touch this"></md-tab>
</md-tabs>
This is tested to work with Angular Material 1.0.1
There is a page in our app that has a single input field. When going to that state on IOS, the keyboard automatically pops up. This is not what is desired. This doesn't happen on the Android version.
I've tried all sorts of things, but nothing is sorting it. My last attempt was to call $cordovaKeyboard.close() in the app.js run block within a $stateChangeSuccess handler. Alas, nothing.
Any pointers would be greatly appreciated!
There's not much to put in code terms. The offending input:
<ion-item class="item-input-inset">
<label class="item-input-wrapper bg-light-grey-30 text-center">
<input type="text" class="text-center tracker" ng-model="values.exploreSearch" placeholder="Enter city, street, username or keyword"/>
</label>
</ion-item>
And the JS in the $ionicPlatform.ready block in the main app.js run block:
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, error) {
if (window.cordova && $cordovaKeyboard.isVisible) {
$cordovaKeyboard.close();
}
});
I previously tried putting a block in the page controller that looked like this:
$ionicPlatform.ready(function () {
if (window.cordova && $cordovaKeyboard.isVisible) {
$cordovaKeyboard.close();
}
}]);
This last block, according to my client (as I don't have an IOS device to test on), worked the first time the page loaded, but not subsequently. If you left the page, and came back, the keyboard would pop up.
I had the same issue, and it seems to have something to do with the way the iOS browser sends click events (more here: http://blog.ionic.io/hybrid-apps-and-the-curse-of-the-300ms-delay/)
The way I worked this out was to hide my form on $stateChangeStart and then show the form 400ms later. An slightly better way is to have a transparent div covering everything, that you hide 400ms after $ionicView.enter.
<div style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 1000;" ng-hide="showFields" class="ng-hide"></div>
I've got a presentation running with reveal.js and everything is working. I am writing some sample code and highlight.js is working well within my presentation. But, I want to incrementally display code. E.g., imagine that I'm explaining a function to you, and I show you the first step, and then want to show the subsequent steps. Normally, I would use fragments to incrementally display items, but it's not working in a code block.
So I have something like this:
<pre><code>
def python_function()
<span class="fragment">display this first</span>
<span class="fragment">now display this</span>
</code></pre>
But the <span> elements are getting syntax-highlighted instead of read as HTML fragments. It looks something like this: http://imgur.com/nK3yNIS
FYI without the <span> elements highlight.js reads this correctly as python, but with the <span>, the language it detects is coffeescript.
Any ideas on how to have fragments inside a code block (or another way to simulate this) would be greatly appreciated.
To make fragments work in code snippets, you can now use the attribute data-noescape with the <code> tag
Source: Reveal.js docs
I got this to work. I had to change the init for the highlight.js dependency:
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() {
[].forEach.call( document.querySelectorAll( '.highlight' ), function( v, i) {
hljs.highlightBlock(v);
});
} },
Then I authored the section this way:
<section>
<h2>Demo</h2>
<pre class="stretch highlight cpp">
#pragma once
void step_one_setup(ofApp* app)
{
auto orbit_points = app-><span class="fragment zoom-in highlight-current-green">orbitPointsFromTimeInPeriod</span>(
app-><span class="fragment zoom-in highlight-current-green">timeInPeriodFromMilliseconds</span>(
app->updates.
<span class="fragment zoom-in highlight-current-green" data->milliseconds</span>()));
}
</pre>
</section>
Results:
I would try to use multiple <pre class="fragment">and change manually .reveal pre to margin: 0 auto; and box-shadow: none; so they will look like one block of code.
OR
Have you tried <code class="fragment">? If you use negative vertical margin to remove space between individual fragments and add the same background to <pre> as <code> has then you get what you want.
Result:
Sorry for the generic title, but i dont know how to call the element i want to create. Thats what i need... i tried to post image, but i dont get necessary privileges yet. So ill try to describe it.
Here on stackoverflow, on the question's page, after each title and summary there are some boxes displaying the tags from the questions.
I want the exactly same look, but instead of links, those boxes should act the same way as a Radio Button List. I can only choose one of then at a time and when pick one, the selected one ill get different style added to him. After submitting the form i should be able to recover de selected item in the controller.
I'm using Asp.Net MVC4 and the options that make the element will come from a controller.
Sorry for the question without code or something that i allready make. But i have this necessity and i dont even know if this sort of style or element have an specific name or keyword D.
Do you guys know from where to start with something (tutorials with similar final result ?) ?
Thanks for the help and sorry for the bad english.
Code After Looking at the proposed answers' link
CSS Code
input[type=radio] { display: none;}
.rbLista span { font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Sans-serif;
font-size:12px; background: RGB(217,217,217); border: 1px solid RGB(217,217,217); }
.rbLista span:hover { border: 1px solid RGB(54,52,53); background: RGB(54,52,53); color: white; }
.rbLista input[type=radio]:checked + span { background: #D71712; color: #fff; border: 1px solid #D71712; }
.rbLista input[type=radio]:checked + span:hover { background: #D71712; }
and View Code
<section class="rbLista">
#foreach (var item in Model.ChamadoDetalhe.Transitos)
{
<label>
#Html.RadioButtonFor(x => x.NovoTransito.Transito, #item.Text, new { #id = item.Text, #text = item.Text })<span>#item.Text</span>
</label>
}
#Html.ValidationMessageFor(x => x.NovoTransito.Transito)
</section>
You could try something like this. Here's a working demo.