When debug a webpage, a icon show on page but do not find the class definition! for example, below code use a class "icon icon-md ion-md-power", which libray should include to use this icon. any tutorial is welcome since I am a newbie for web programming!
<ion-icon name="md-power" role="img" class="icon icon-md ion-md-power" aria-label="power"></ion-icon>
ionicons not use CSS to display icon. ionicon have svg icons and get svg content by JavaScript based on ion-icon's attributes. You can learn about the Shadow DOM technology that ionicon uses to display icons in an MDN article.
icon.tsx, utils.ts#getUrl()
loadIcon() {
if (Build.isBrowser && this.isVisible) {
const url = getUrl(this); // <-- get URL of SVG icon! getUrl() declare at utils.ts.
if (url) {
if (ioniconContent.has(url)) {
this.svgContent = ioniconContent.get(url);
} else {
getSvgContent(url).then(() => this.svgContent = ioniconContent.get(url));
}
}
}
Related
I am developing a website using VueJS, and Kentico Kontent as a CMS. This CMS offers the "rich text" feature, basically allowing text content to embed links and basic formatting, which gets automatically converted into HTML when served through the API.
I have no problem displaying the HTML content using the v-html directive, but I cannot think of a way to set the attributes of the inner <a> tags to _blank, so that the embedded links open new windows when clicked.
Is there any elegant way to do this without having to parse the HTML from the Front-end?
You could create a directive:
Vue.directive('links-in-new-window', {
inserted: function(el) {
const anchors = el.querySelectorAll('a')
anchors.forEach((anchor) => anchor.target = "_blank")
}
})
And just apply that to the same element you're using the v-html on:
<div class="content" v-html="content" v-links-in-new-window></div>
In vue V3 the directive would look like this:
app.directive('links-in-new-window', {
mounted: function(el) {
const anchors = el.querySelectorAll('a')
anchors.forEach((anchor) => anchor.target = "_blank")
}
})
HTML is the same, remember to use v- => v-links-in-new-window
<div class="content" v-html="content" v-links-in-new-window></div>
I would like to extend the native button element but I am not sure how to add styling. In Google's example here they don't use a template so the fancy-button custom element itself is the button, rather than adding a template and shadow DOM containing a button element. It seems to defeat the object of extending a native element if I just add a button directly to the shadow DOM, but I don't know how to style and extend native element. How can I create a custom element which is simply the native button element extended to have a red background?
var style = `button { background-color: red; };
class FancyButton extends HTMLButtonElement {
constructor() {
super();
}
customElements.define('fancy-button', FancyButton, {extends: 'button'});
since you don't have shadowDOM involved you can use global CSS
you can set styles in the connectedCallback: this.style.background='red'
you can dynamically create a STYLE tag with unique identifier scoping your element
See JSFiddle for all 3 examples: https://jsfiddle.net/WebComponents/gohzwvL4/
Important is the notation for your Customized Built-In Element
Correct : <button is="fancy-button></button>
InCorrect: <fancy-button></fancy-button> (this is Autonomous Element notation)
.
Firefox pitfall:
The INcorrect notation works in Firefox , but not in Chrome & Opera
Firefox processes Extended Built-In Elements with Autonomous Element notation
but only for elements created in the DOM prior to definition:
This
<fancy-button>Hello Fancy Red Button #1</fancy-button>
<script>
class FancyButton extends HTMLButtonElement {
constructor() {
super();
}
connectedCallback() {
this.style.background = 'red';
}
}
customElements.define('fancy-button', FancyButton, { extends: 'button' });
</script>
<fancy-button>Hello Fancy Red Button #2</fancy-button>
is displayed in Firefox as:
any number of Custom Elements before the SCRIPT tag are colored!
When the <SCRIPT> is moved into the <HEAD> Firefox won't color any background
When the script is executed after the onload event all buttons are colored
This is non-standard behaviour!
I'm stuck on a problem. I am using Kendo MVC and want to display font awesome icon in Grid Custom commands.
I have defined Grid Custom Commands for Edit, Delete, and Detail.
columns.Command(command =>
{
command.Custom("Edit").Action("Edit", "User");
command.Custom("Details").Action("Details", "User");
command.Custom("Delete").Action("Delete", "User");
}
Please review the following screenshot. I want to auto-add the fa fa-edit and other icons using MVC Helper extension method.
It is possible to override the CSS for the edit/details/delete command buttons which gives you the option to apply the same style for all pages or just one, for example:
.k-grid-content .k-button.k-grid-edit::before {
content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-delete::before {
content: "\f1f8" !important;
}
And when grid transitions (after placed into edit mode):
.k-grid-content .k-button.k-grid-update::before {
content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-cancel::before {
content: "\f1f8" !important;
}
Here is the a complete Dojo example and all Font Awesome icons along with their CSS values.
I am using react-boilerplate (3.4.0) with react-router internally for the routing.
I have tried to create a Link with : < a href="#anchor-tag" >< /a >
When I click on it I expect to scroll to the div with id=anchor-tag
It just scroll to the top of the page, even if I use a Link component instead of a < A > tag. Does we have to care about use < A > or < Link > ?
How should we create anchor tag in react-router ?
This might be a while late but what you can do is add this to your component:
import ReactDOM from 'react-dom';
... some more codez...
componentDidUpdate() {
const anchor = this.props.location.hash.replace('#', '');
if (anchor) {
const domElement = ReactDOM.findDOMNode(this.refs[hash]);
if (domElement) {
domElement.scrollIntoView();
}
}
}
and then on your actual element that you want to navigate to, you need to add the ref attribute, like this:
<h1 ref="my-anchor">Hello World</h1>
The link element is going to look just like a regular link:
<a href="/about#my-anchor>Go To Anchor</a>
Or with react-router:
<Link key="my-anchor" to="/about#my-anchor">Go To Anchor</Link>
This works with react-router 2.6.1 - not sure about later versions at this point.
Hope this helps!
Improved answer above:
componentDidMount() {
const anchor = this.props.location.hash;
if (anchor) {
const domElement = document.querySelector(anchor);
if (domElement) {
domElement.scrollIntoView();
}
}
}
I highly recommend to use the package from Rafael Pedicini called react-router-hash-link.
Live example right there. It's working well and the code is clean.
I have a school assignment to create a one page html static.
I want to have some buttons to change the language but I don't want any addition like "index.html/en/" or "index.html?lang=en". I prefer to have it with CSS only but I don't know whether it is possible or not.
In short I just want a simply bilingual "index.html" and have buttons to change the content text.
I am new in html scripting so I'm looking for some sample code or some detailed tutorial will be help.
I suggest using JS/jQuery for that:
Have language mapping for each element that will be translated:
// Translations object:
var translations = {
'en': {
'home': 'Home',
'back': 'Back'
/* ... */
},
'lt': {
'home': 'Pradžia',
'back': 'Atgal'
/* ... */
}
};
// wait for all DOM elements to load
$(document).ready(function() {
// when button is clicked
$('.lang-btn').click(function() {
// take translations subset
var lang = translations[$(this).data('lang')];
// for each element that has "data-key" attribute
$('[data-key]').each(function() {
// change it's content to other language
$(this).text(lang[$(this).data('key')]);
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-page">
Language:
<button class="lang-btn" data-lang="en">En</button>
<button class="lang-btn" data-lang="lt">Lt</button>
<hr/>
Home
<button data-key="back">Back</button>
</div>
This code is not checking if there is such translation or not. You can improve this algo with fallback to English.
For SEO reasons I'd prefer to use /en/. Use a .htaccess file with mod_rewrite.
See here Create beautiful url’s with mod_rewrite
If it is just one page, so I assume the contain is not much. Try something simpler like:
function en() {
document.getElementById("content").innerHTML = "Example";
}
function de() {
document.getElementById("content").innerHTML = "Beispiel";
}
<div id="content">sample</div>
<button onclick="en()">English</button>
<button onclick="de()">German</button>