i want to override default behaviour of emmet in vs code.
it works good for me in jsx (javascriptreact ) but not correctly with tsx files. i want this snippet for nextjs project. i want .name expand to
<div className={Style.name}> </div>
instead of
<div class="name"> </div>
i tried defining custom snippets and also syntax profile like this
"emmet.syntaxProfiles": {
"html": {
"snippets": {
"div": "<div className={Style.${2:class}}>${3}</div>"
}
}
}
{
"html": {
"snippets": {
"ss": "<div className={Style.${2} \\}>${3}</div>",
"sss": "<${1:div} className={Style.${2} \\}>${3}</${1:div}>"
}
}
}
Related
I have encountered a problem with the Yew library's component mechanism. If I include any other html code in the macro for the main model's html macro, the compiler complains that "only one root html element allowed".
My structure is as follows:
main.rs
impl Component for Model {
// ...
fn view(&self) -> Html<Self> {
html! {
<Navigation />
<p>{ "Hello World!" }</p>
}
}
}
components/navigation.rs
impl Component for Navigation {
// ...
fn view(&self) -> Html<Self> {
html! {
<nav class=("uk-navbar-container","uk-padding","uk-padding-remove-bottom","uk-padding-remove-top"), uk-navbar="">
// ...
</nav>
}
}
}
I am suspecting the html macro is adding a -tag or the whole index.html around the html tags, thus causing the "double" html tag. However, how can I avoid this or what did I miss when using components?
As mentioned before you need to wrap it. Yew supports JSX, you can do it like this:
impl Component for Model {
// ...
fn view(&self) -> Html<Self> {
html! {
<>
<Navigation />
<p>{ "Hello World!" }</p>
</>
}
}
}
I prefer this way as it doesn't add any additional HTML to the rendered document. A <div> could eventually break existing CSS or JS. But if you write a completely new component it's also a good idea to always have only one wrapping HTML element per component (=use a div).
The compiler complaint is about the yew html! macro must have one element enclosing everything.
So the fix for the error is to simply add a wrapper element like so:
main.rs
impl Component for Model {
// ...
fn view(&self) -> Html<Self> {
html! {
<div>
<Navigation />
<p>{ "Hello World!" }</p>
</div>
}
}
}
It doesn't have to be a div, it can be any html element.
I have changed the settings in the highlight-matching-tag extension for Visual Studio Code to add an underline to the opening and closing tags in html like so:
"highlight-matching-tag.style": {
"textDecoration": "underline"
}
Here is the result. The style is being applied to the entire opening tag along with all its attributes.
Is it possible to change the style to underline only the opening tag and not its attributes like we have in the Atom editor?
Here is the result that I trying to accomplish.
This will achieve what you want:
"highlight-matching-tag.styles": {
"opening": {
"name": {
"underline": "#8854d0",
}
},
"closing": {
"name": {
"underline": "#8854d0"
}
}
},
I am trying to style a data-placeholder in SCSS.
I want to change the color of data-placeholder from the existing color to dark-grey but my attempts have not been successful, what am I missing? Code below
HTML5
<optic-select-input id="placeholder" class="dataplaceholder" data-placeholder="Choose or type subject..." title="Type your subject" ng-model="newMessage.Subject" data-maxlength="50" spellcheck="true">
SCSS
.dataplaceholder{
#include placeholder(#A9A9A9,"");
}
#mixin placeholder($color, $size:"") {
&:-data-placeholder{
color:$color !important;
#if $size != "" {
font-size: $size;
}
}
}
Add a square brackets like [data-placeholder].
#mixin placeholder($color, $size:"") {
&[data-placeholder] {
color:$color !important;
#if $size != "" {
font-size: $size;
}
}
}
.dataplaceholder{
#include placeholder(#A9A9A9,"");
}
Not related to this specific example in the question
But to anyone that came across this question. If you are doing this, you likely are overriding a component someone else made and cannot modify directly.
You can wrap the component, then target the HTML element that has the data placeholder.
In a React project that I recently worked on, I wrapped the outer component with something like
<div className={styles.featureContent}>
Then in the SCSS file for my component that used something from a shared component library for form inputs
.featureContent {
// padding
.subheadline,
.description {
// margins
div[data-placeholder] {
// you can begin to target this with specificity
&::before {
// this is what i was targeting for my task.
// Making the placeholder italic.
font-style: italic;
}
}
}
I'm wondering if it's possible to use media queries with CellLists. For example:
interface MyStyle extends Style {
}
public interface MyResources extends Resources {
#Source({ Style.DEFAULT_CSS, "MyStyle.css" })
MyStyle cellListStyle();
}
And then I have the CellList CSS file "MyStyle.css" :
/* cell flow basic css style */
.cellListWidget {
}
.cellListEvenItem {
}
.cellListOddItem {
}
.cellListEvenItem:hover,.cellListOddItem:hover {
}
.cellListKeyboardSelectedItem,.cellListSelectedItem:hover {
}
.cellListSelectedItem {
}
Is it possible to have something like this
#media ( min-width : 768px) {
.cellListEvenItem {
height: 90px;
}
}
inside MyStyle.css ? I tried and it doesn't seem to recognize it (no errors or warnings, but it doesn't work either).
I used it like this:
new CellList<MyObject>(listCell,
(CellList.Resources) GWT.create(MyResources.class));
If the above is not possible is there any workaround to achieve this?
Thank you.
CSS Resource didn't allow to use CSS3 media queries.
You must use the new stylesheet compiler named GSS in the GWT version 2.7.
You must update your project to the version 2.7.
In your gwt.xml add this line for activate the new GSS :
<set-configuration-property name="CssResource.enableGss" value="true" />
And rename your css file to MyStyle.gss
You may need to change some CSS Resource code :
http://www.gwtproject.org/doc/latest/DevGuideGssVsCss.html
You can learn more in the presentation from last GwtCreate :
https://drive.google.com/file/d/0BwVGJUurq6uVNGgtOWtOdy0wRzQ/view
is it possible in a TimelineJs instance to load JSON data from a variable in the page?
<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
width: "100%",
height: "100%",
source: 'example_json.json'
}
</script>
<script type="text/javascript" src="../compiled/js/storyjs-embed.js"></script>
this is the default code from the timelineJS example.
Basically i'm trying to replace the source: 'example_json.json' with a
source: '{
"timeline":
{
"headline":"Sh*t People Say",
"type":"default",
"text":"People say stuff",
"startDate":"2012,1,26",
"date": [
{
"startDate":"2011,12,12",
"endDate":"2012,1,27",
"headline":"Vine",
"text":"<p>Vine Test</p>",
"asset":
{
"media":"https://vine.co/v/b55LOA1dgJU",
"credit":"",
"caption":""
}
},
{
"startDate":"2012,1,26",
"endDate":"2012,1,27",
"headline":"Sh*t Politicians Say",
"text":"<p>In true political fashion, his character rattles off common jargon heard from people running for office.</p>",
"asset":
{
"media":"http://youtu.be/u4XpeU9erbg",
"credit":"",
"caption":""
}
}
]
}
}'
but it doesn't work
The problem is that you are passing in the JSON object as a string. Remove quotation marks and it should work. Should look like this:
source: {
"timeline": {
...
}
}
I've put together a working example on JSFiddle