I am using Vue Material Design Icons ref, and they automatically have a title attribute set - by default it is a human readable form of the icon's name, e.g. Plus Icon. Because this is being imported directly from the Node Package, I don't want to mess with the components themselves. I also know that I could write some custom JS to fix it, but I don't really want to do that.
Is there a standard way to disable the title attribute during component registration or in some other fashion that doesn't add a performance cost or require any patchwork code?
note: I'm also using Webpack if this can be done that way.
From the link you've provided, that icon component provides a prop where you can set the title to whatever you wish if you don't want to use the default.
Props
title - This changes the hover tooltip as well as the title shown to screen readers. By default, those values are a "human readable"
conversion of the icon names; for example chevron-down-icon becomes
"Chevron down icon".
Example:
<android-icon title="this is an icon!" />
Related
In developing an Angular app, I find myself using similar HTML components with the same arugments over and over. For example:
<fa-icon class="tms-hover-animation px-2" (click)="onDeleteContact(row)"
[icon]="faTrash" ngbTooltip="Delete Contact" placement="bottom auto" container="body">
The placement and container fields are redundantly defined over and over and over. What I'd much rather be able to do is the following:
<my-fa-icon (click)="onDeleteContact(row)" [icon]="faTrash"></my-fa-icon>
However,I can't find an minimal example of how to do this.
To clarify: my main misunderstanding is how can I reuse <fa-icon and pass all of its inputs (click, icon, etc... ) without having to explicitly redeclare them in my wrapper? Something like:
#Component
FaIconWrapper
args: <-- These automatically passed into underlying fa-icon
How could we create a custom HTML element like this with default arguments, but still pass (click), [icon] and any other inputs down into the wrapped component?
I'm also worried about falling into an anti-pattern here.
I'm fairly new to changing paths / position of page so I would like a little help on this.
Say, when a button is clicked, I want to scroll down to another portion of the page. (where id of that section is 'xyz') however, I'm using an entirely different component to access that section.
If I were to use href, I can easily do : href="/app/appid#xyz"
however, if appid is a variable retrieved from the ts file, how can I insert it into my href?
It's easier to to use [routerlink]="['app', appid]" but how can I insert the "#xyz" into my string?
Or is there a completely separate and easier functionality I can use?
Thank you
Add the frament attribute:
<a [routerLink]="['app', appid] fragment="xyz">Link</a>
https://angular.io/api/router/RouterLink
I'm not sure how I explain this... :)
I am using symfony, twig and bootstrap to make a basic registration form on my website.
I have a checkbox at the end which the user must tick to accept the terms and conditions. the label for this checkbox includes HTML (the tag) which Bootstrap (or Twig) escapes, so I have to use a custom label next to the checkbox:
<div class="row align-items-center"> <!-- this is a workaround, may not be best practise -->
{{ form_errors(form.acceptTerms) }}
{{ form_widget(form.acceptTerms, { 'attr': {'form.acceptTerms.errors': ' '} }) }}
<label class="form-check-label" for="acceptTerms">I have read and accepted the Terms and Conditions</label>
</div>
Bootstrap renders the label as part of the form_widget twig element rather than the form_label , and the form_error is also rendered within the form_widget when there is an error. So, before, my label would just be displayed in plaintext, i.e. the html <a> tags would be visible to the user. But of course, since I am showing a custom label as well as the widget which includes the label, I have to set the widget label to ' ' (empty string) so now only one label is shown.
This work perfectly, UNTIL there is an error (i.e. the user doesn't tick the box and thus cannot register).
Then the error displays within the form_widget which is next to my custom label (they are in a bootstrap row div) and it ends up pushing my label to the right, when I want the error to be above the label. I tried adding {{form_errors(form.acceptTerms) }} above it as you can see, but that just displays the error BOTH above and next to the label. This is what it looks like with the above code in place:
ERROR you must accept the terms and conditions!
[ ] ERROR you must accept the terms and conditions!I Accept the **Terms and Conditions**
then this is what I WANT it to look like:
ERROR you must accept the terms and conditions!
[ ] I accept the **Terms and Conditions**
This seems like it should be a really easy thing to do, I don't know why its this difficult.
I need to somehow stop bootstrap from rendering the form_error and form_label within the form_widget .
Thanks
In Symfony 4.1 the bootstrap form theme was updated to be compliant with the WCAG 2.0 standard. As a result, the error for a field is no longer displayed with form_errors but within your form_label. If you separate your widget and label you will notice.
More information about this change can be found here.
In order to fix your problem just get rid of form_error (you don't need it any more) and only use form_label and form_widget. If that doesn't satisfy your needs or if you do not like the new behaviour for bootstrap 4 forms in symfony 4.1, you can always use an older form theme, or create your own.
If you decide to create your own form theme make sure to update the file twig.yaml file to something like this:
twig:
form_themes:
- form/custom_form_theme.html.twig
In this case, your custom form theme is strored in templates/form/custom_form_theme.html.twig
I would like to dynamically add tooltips to some text. Ideally I would like to do so with the built-in tooltips shipped with Angular Material 2, but also a custom solution will do.
As an example, in the sentence the dog is barking, I would like to add to the word dog a tooltip displaying german shepherd.
The text is currently shown like this: <p>{{ stringFromSecureServer }}</p>.
So far I've tried with a custom pipe (addTooltip) with which I find and replace text:
transform(value: string): any {
value = value.replace('dog', '<span matTooltip="german shepherd">dog</span>');
value = this.sanitizer.bypassSecurityTrustScript(result);
return value;
}
If then I inject in the page the text with <p [innerHTML]="stringFromSecureServer | addTooltip"></p>, the text is actually modified, but matTooltip (Angular Material 2 component) is converted to mattooltip and it won't work.
Assuming that the problem was somehow linket to AM2, I've tried with a custom Directive, based on the excellent guide by Netanel Basal.
While the custom [tooltip] Directive is working with statically typed DOM elements (e.g. <span tooltip="test">test</span>), this still does not work when I find and replace the text as shown above.
Is there a way to achieve what I'm trying to do?
PS
As far as I can tell, I should not have XSS issues because all the strings that I need to work on are NOT user generated. All strings are served by the server through an https connection (Let's Encrypt auto renewed cert)
I want to store some additional data on an html page and on demand by the client use this data to show different things using JS. how should i store this data? in Invisible divs, or something else?
is there some standard way?
I'd argue that if you're using JS to display it, you should store it in some sort of JS data structure (depending on what you want to do). If you just want to swap one element for another though, invisible [insert type of element here] can work well too.
I don't think there is a standard way; I would store them in JavaScript source code.
One of:
Hidden input fields (if you want to submit it back to the server); or
Hidden elements on the page (hidden by CSS).
Each has applications.
If you use (1) to, say, identify something about the form submission you should never rely on it on the server (like anything that comes from the client). (2) is most useful for things like "rich" tool tips, dialog boxes and other content that isn't normally visible on the page. Usually the content is either made visible or cloned as appropriate, possibly being modified in the process.
If I need to put some information in the html that will be used by the javascript then I use
<input id="someuniqueid" type="hidden" value="..." />
Invisible divs is generally the way to go. If you know what needs to be shown first, you can improve user experience by only loading that initially, then using an AJAX call to load the remaining elements on the page.
You need to store any sort of data to be structured as HTML in an HTML structure. I would say to properly build out the data or content you intend to display as proper HTML showing on the page. Ensure that everything is complete, semantic, and accessible. Then ensure that the CSS presents the data properly. When you are finished add an inline style of "display:none;" to the top container you wish to have dynamically appear. That inline style can be read by text readers so they will not read it until the display style proper upon the element changes.
Then use JavaScript to change the style of the container when you are ready:
var blockit = function () {
var container = document.getElementById("containerid");
container.style.display = "block";
};
For small amounts of additional data you can use HTML5 "data-*" attribute
<div id="mydiv" data-rowindex="45">
then access theese fields with jQuery data methods
$("#mydiv").data("rowindex")
or select item by attribute value
$('div[data-rowindex="45"]')
attach additional data to element
$( "body" ).data( "bar", { myType: "test", count: 40 } );