Can I set a custom attrubute as a directive to HTML tag like angular‘s directive? - web-component

I wanner define a directive widthout angular or other framwork,
which like this :
<h1 moveable></h1>
movableDirective can make the element h1 do something.
I could define a custom element like a 'movable-h1' extends HTMLHeadingElement,
but without custom element how can i implement this? is there something called 'custom-directive' or 'custom-attribute'?

Related

How to define custom styling tags for CSS

Sorry if this is a noob question, but I would like to know if there is a way to make custom tags linked to CSS entries (sorry if this the wrong terminology).
Like the h1, h2 tags but with a name I choose. So that I can apply these custom tags around text and modify it without doing inline styling for every instance or styling a whole div the same. So for example:
<customTag> This makes the text look like what 'customTag' is described in styles.css </customTag>
Is this possible? If so how can I do it?
Thank you.
In a HTML element you can provide the class="YourClassName" attribute to create a custom class that you can access in CSS.
Example:
In your html file you would write something like:
<p class="maintext">Hello World!</p>
And access the class in css like this:
.maintext {
color: #fff;
}
You could then add the class="maintext" attribute to any HTML element you'd like to have the same styling.
See this page for more information about HTML classes.

How can I modify css (e.g. position) of Wicket's activity indicator?

I am using IAjaxIndicatorAware for a panel containing several elements able to call AJAX. The indicator shows currently under the panel and I need to change its position - how should I do that?
If you use IAjaxIndicatorAware then you have a Wicket Component that implements IAjaxIndicatorAware. In that case Wicket just makes the HTML element with id == IAjaxIndicatorAware#getAjaxIndicatorMarkupId visible by using jQuery.show($('#indicatorId')). This HTML element is placed by you somewhere in your page so you have full control on it. For example you can add CSS rule like:
#indicatorId {
// padding: ...
// margin: ...
}
But if you use org.apache.wicket.extensions.ajax.markup.html.AjaxIndicatorAppender then you should use the CSS class returned by org.apache.wicket.extensions.ajax.markup.html.AjaxIndicatorAppender#getSpanClass() as a CSS selector.

Create changeable container for component

I develop component, but I need, what would can change the tag name of a component container.
Like this:
<my-component tagName="section"></my-component>
render to
<section>... my inner component tags ...</section>
How to make it?
I read about render() and functional components, but create component template with
render(createEl, ctx){
return createEl(ctx.props.tagName, [createEl('div', [...])])
}
... looks horrible and uncomfortable.
edit:
Something like this:
http://jsbin.com/qozawiwumi/edit?html,output
I decided this question, using is="" and this.$vnode.data.tag for render custom component wrapper.
https://jsbin.com/gifesom/edit?html,output

Create dynamic class with Angular

I'm trying to add a dynamic class in Angular template and set a style attributes accordingly.
HTML would be -- <body class="{{ product-id }}">
CSS would be --
product-id : { color: #ccc; }
Where product-id would be a dynamic value.
What would be the best method to do this? I want to be able to have this be a selector I could use for various element locations within the page which is why ng-style isn't working for me.
I think the best approach for what you're looking for is the ng-class directive which allows you to set different dynamic classes based on $scope variables.
You can check out the docs for ng-class here.
Hope that helps you out!

#Html.RenderAction and CSS

How do I apply a class to the following so that I can apply a specific css style to it?
The rest of the consist of anchor tags so I can easily apply a class but where do I stick it on this #Html.RenderAction?????
<li>#{Html.RenderAction("CartSummary", "ShoppingCart");}</li>
RenderAction will output a PartialView so I guess your class attribute should be put in the view (the one you call from the method CartSummary in ShoppingCartController) or inside the <li> that call it (maybe with a DIV)
RenderAction does not support passing in an object containing html attributes, like most other MVC helper methods do, so you cannot apply a css class directly using this method. Either you can wrap the output of RenderAction in a div with your css class from the parent view, or you can add a wrapper div to the output of the action itself.
Why u don't want to use Cart (#ViewBag.CartCount)
Be simple.

Resources