i see teacher in a tutorial of Reactjs he type : nav.navbar
and magically <nav className="navbar"></nav> appear. Can some one help me to explain it and how to do this. Thanks a lot
That is emmet notation.
At the basics, it will transform a selector: nav.navbar into the HTML (well, JSX) markup equivalent matching that selector: an element with a nav tag name with a class name of navbar.
How to do this will depend on your IDE. For VSCode, for example:
Go to Code (at the top of your screen), then Preferences, then Settings in VSCode
In the options on the left, select Extensions, then Emmet
Scroll to the Include Languages section, add in the item input, javascript and in the value input, javascriptreact and hit Add Item
Related
I'm mostly interested in seeing the class names used so I can override them. Problem is, as soon as I click anywhere, even on the dev tools, the drop-down gets removed from the DOM, so there's no way to inspect it.
thanks
You can get all the classNames straight off the source:
Main element:
let className = classNames('Select', this.props.className, {
'has-value': valueArray.length,
'is-clearable': this.props.clearable,
'is-disabled': this.props.disabled,
'is-focused': this.state.isFocused,
'is-loading': this.props.isLoading,
'is-open': isOpen,
'is-pseudo-focused': this.state.isPseudoFocused,
'is-searchable': this.props.searchable,
'Select--multi': this.props.multi,
'Select--rtl': this.props.rtl,
'Select--single': !this.props.multi,
});
You can get the menu classnames from there as well.
I have quick suggestions and emmet enabled for javascript babel files.
I'd like it so that when a quick suggestion is made e.g. when I type V in the context below for it to select View - not for emmet to expand it into a jsx tag e.g. <View />
import { View } from 'react-native'
I would, however, like emmet to keep doing so for jsx tags that are scoped to a set of round braces e.g.
return (
View // expands to: <View />
)
You can currently do this in sublime text by using a package called Scope Selector which exposes meta values like: meta.group.braces.round.js given a selection. I can then use this value as a context for a keybinding.
When I inspect the scope in VSCode however, there doesn't seem to be anything specific that I could use in the when clause of emmet's Expand Abbreviation keybinding:
Can anyone shed some light on how I may go about doing this - if it's possible. Thanks.
How do you include a space before the closing tags in self closing tags with WebStorm/IntelliJ-based products?
Default settings turns <ReactComp /> to <ReactComp/>, which is against one of the rules (jsx-space-before-closing) in the commonly used AirBNBs Javascript style guide.
Maybe a little confusingly, the setting is under "HTML" code style and not the JS code style in IntelliJ.
Enable the setting "In empty tag" in Preferences -> Editor -> Code Style -> HTML.
When you do an explicit reformat the space will be added. To ensure that the space is added when autocompleting React components, check the same box in in the Preferences -> Editor -> Code Style -> XML -> Other tab.
Screenshot from 2016-10-12, IntelliJ IDEA 2016.2
The .editorconfig way.
[**]
ij_html_space_inside_empty_tag = true
Here's how you find the name of any option. The same IDEA Code Style page has a gear button with an option to export to .editorconfig:
But this exports all the options, it's a 1070 line file in my case. So you export once to cfg1, change the desired setting through UI, export again to cfg2, and then compare the two configs to find the one option that changed.
This is such a great script called fullPage.js located here: https://github.com/alvarotrigo/fullPage.js
I managed to load the js file and css file and even with the Void Menu Module, managed to call anchor links, but I'm struggling with the data attributes part of the implementation of this cool code! Any help is greatly appreciated! How do I get data-attributes to work in Drupal 7.25? I mean, I need to add them to the menu, so that the html looks something like this:
<ul id="menu">
<li data-menuanchor="firstPage">First slide</li>
<li data-menuanchor="secondPage">Second slide</li>
<li data-menuanchor="3rdPage">Third slide</li>
<li data-menuanchor="4thpage">Fourth slide</li>
</ul>
Just want to add it to the Main Menu in Drupal. Any idea how? Am trying to implement this on my homepage and using the Adaptive Sub-Theme with Display Suite Module installed, if that helps any.
Have added the following to template.php, but it makes no difference at all:
function MY_THEME_NAME_menu_link(&$variables) {
$variables['element']['#attributes']['data-menuanchor'] = substr($variables['element']['href'], 1);
return theme_menu_link($variables);
}
What am I doing wrong here?
EDIT
You can download the sitemaniacs theme here: http://dream-portal.net/dpdowns/MyProblem.zip
You can just download Adaptive Theme from Drupal here and than copy sitemaniacs to your sites/all/themes folder and than just enable the theme and go to your homepage.
There is also a folder called fullPage that is the example of it working perfectly fine without Drupal.
Files to take note of:
/sites/all/themes/sitemaniacs/scripts/custom.js
/sites/all/themes/sitemaniacs/template.php
/sites/all/themes/sitemaniacs/css/example2.css
/sites/all/themes/sitemaniacs/sitemaniacs.info
Let me know if you need anything else, k?
And Thank YOU!!! What I've done is create 4 Basic Pages, and using the Field Formatter Class Module to give the body field a class (when managing the Display) defined as section, than promoted to front page. Than I used HTML within another Node Type and used NodeBlock Module to output it as a menu item within the Menu Bar section of the blocks, with url <front>. Let me know if you need anything else for this, but I can't get it to work using this simple approach. I've tried tons of ways of doing it also, but no go for me. If you find a method that works, or perhaps something is wrong somewhere else, please please let me know.... I'm pulling out my hair on this one.
Have tried straight HTML, and now getting this:
Uncaught TypeError: Cannot read property 'top' of undefined jquery.fullPage.js?mzf0rp:506
scrollPage jquery.fullPage.js?mzf0rp:506
doneResizing jquery.fullPage.js?mzf0rp:889
The first error seems to occur in the scrollPage function on this line here:
var dtop = dest !== null ? dest.top : null;
Looks like dest.top is not defined on .top. Any idea why?
Use the Menu Link Attributes module that will let you add custom attributes per menu item.
for "href" you can use <'front'>#4thpage(front without any “cotation”) in path in menu that you create in Structure > Menus and use the Menu Link Attributes module for other attributes
The header has a navigation menu I'd prefer to keep, but it's taking up too much space. What can I do to make it look good on mobile?
One possibility is to use togglers - buttons that make its inner content appear/disappear. The uraniumjs library contains some widgets, one of them being a very simple yet useful toggler implementation. It also does that unobtrusively.
You will need to include the uranium js file, so you can just use it. Then, you can do it as explained below.
You need to transform your menu code into three parts: a wrapper container, a "button" section and a content section. To identify each of those parts, use these data attributes:
data-ur-set="toggler"
(add this attribute to the wrapper)
data-ur-toggler-component="button"
(add this attribute to the "button" section)
data-ur-toggler-component="content"
(add this attribute to the content section)
You need to include these CSS rules somewhere too:
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'] {
display:none;
}
*[data-ur-set='toggler'] *[data-ur-toggler-component='content'][data-ur-state='enabled'] {
display: block;
}
You can see a small example running here: http://play.tritium.io/8af1576e385f5db05f6dc75404f993c16485395b.
Both the Bloomingdales and the Macys mobile sites use that approach. You can see it working there.