Property 'skin' is read only - > Flex Skinning - flex4

I want to decorate a flex Button with a cutom skin component .
But when i point the 'skin' property to the source , it says "Property skin is read only"
My Button declaration :
<s:Button id="state"
label="State View"
skin="CustomButtonSkin"
click="state_clickHandler(event)" />
This is inside a Component and CustomButtonSkin.mxml is in the same directory ...

You should set the skinClass property, not skin

Related

How to set a default text ="search here" placeholder in kendo Grid

This is the code I am using present, tried in many ways like used placeholder tags but nothing worked out. Help me
<kendo-grid-column field="food" title="foods">
<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
<kendo-grid-string-filter-cell
[showOperators]="false"
[column]="column"
[filter]="filter">
</kendo-grid-string-filter-cell>
I tried this approach working now
Just put this piece of code in your component file
public placeHolders(){
$(".k-textbox").eq(0).attr("placeholder", "column 1");
$(".k-textbox").eq(1).attr("placeholder", "column 2");
$(".k-textbox").eq(2).attr("placeholder", "column 3");
}
There is no solution to write default placeholder in kendo-UI > kendo-grid-string-filter-cell as per my understanding.
I have the same problem with you and I cannot find an easy way to do it. The only way i can think to achieve this is below:
1) Create a Reusable Custom Filter Component from Kendo -> https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/
2) Then add a TextArea Input as your filter input and there's the floatingLabel html element in order to use it like placeholder.
#Component({
selector: 'my-app',
template: `
<kendo-textbox-container floatingLabel="First name">
<textarea kendoTextArea></textarea>
</kendo-textbox-container>
`
I cannot find a way to do this by using the Built-In Filter Templates that Kendo UI provides.
I'm not 100% sure of your question. I'm using Vue, but here is how I am setting placeholder text when there are no records by setting the noRecords attribute.
<kendo-grid ref="gridComponent"
...
:no-records="noRecords"
...
v-on:change="rowSelected"
:sort="sortFilter">
In Vue, noRecords is a reactive data field, defined as:
data () {
return {
noRecords: {
template: '<br /><br/> Please start typing a Policy Number, Insured Name, or Address to show results <br /><br /><br />'
}
}

How to load a menu module in header and footer in joomla?

I have attached joomla's Menu module in my template. But I needed it to load in footer position at the same time. So that if I add another menu it should be get added in both the positions in Header and in the footer... What i want to do to load a menu module to two different positions in a page, in header and in footer.
I had tried to add multiple positions in administrator section for a menu module...
screen shots are as follows
For latest version. Joomla3.x :
Get all the modules by template position(replace position with your template position):
<?php
$modules = JModuleHelper::getModules("position");
$document = JFactory::getDocument();
$attribs = array();
$attribs['style'] = 'xhtml';
foreach ($modules as $mod) {
echo JModuleHelper::renderModule($mod, $attribs);
}
?>
Other Solution: you can define position in the template and assign module to that position
Steps:
1.Customize templateDetails.xml file
add
newposition
2.create position in index file of template
in templates/your_template/index.php
<jdoc:include type="modules" name="newposition" />
If I understand correctly, you should simply be able to duplicate your menu module (in extensions->modules) and add the duplicate module to a module position in the footer of your template. If there is no module position in the footer, you add one to the - list in templateDetails.xml, and add it to index.php in your template, like:
<jdoc:include type="modules" name="footer-menu" style="xhtml" />

How to add promotional labels on top of images in Magento 2 ?

How can I place a promotional label layer on top of images in Magento 2. The image I am including is from the out of the box Magento 2 theme and it has a text " New Luma Yoga Collection ...." and a button "Shop New Yoga" that was somehow placed on top of the image in the editor .
This is how it looks in the editor
There are various ways on how you can achieve this. One way is to add a HTML element directly into the WYSIWYG editor and mark it up with HTML. This is also how the Luma theme has done this. If you look at your editor, you see the content in small blue below the image. If you switch from WYSIWYG to HTML, you can see the HTML markup of this element:
<span class="content bg-white">
<span class="info">New Luma Yoga Collection</span>
<strong class="title">Get fit and look fab in new seasonal styles</strong>
<span class="action more button">Shop New Yoga</span>
</span>
You can simply use CSS to style this element.
However...
Although this is a very widely uses approach to do such a thing (and it's easy and fast to do so), it's not the most elegant solution. After all, it's not clear from the WYSIWYG-editor that the 'blue link' is actually a special element. If your client starts messing with it, he will break the layout and call you because 'you made the site, so it's your fault'. Trust me, I've been there...
A more elegant solution would be to use widgets. A widget is very simple to create in Magento 2. First you have to create a file called widget.xml in the etc-folder of your module, and put something like this in it:
<?xml version="1.0"?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
<widget id="example_widget" class="Vendor\Module\Block\Widget\Example">
<label translate="true">Example widget</label>
<description translate="true">This is an example widget</description>
</widget>
</widgets>
Now you can create a Block in the Block-folder of your module:
use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;
class Example extends Template implements BlockInterface
{
/**
* #return string
*/
public function _toHtml()
{
return '<p class="hello">Hello world!</p>';
}
}
Now if you click the widget-button in the WYSIWYG-editor, the widget will be there in the list of widgets to choose from:
Now, if you insert this widget in your WYSIWYG editor, you're sure about the HTML it will output (since that is handled with PHP), and your client cannot 'break it'.
In your scenario you most likely want to add parameters so you can make your widget reusable. This is very simple. Edit your widget.xml:
<widget id="example_widget" class="Vendor\Module\Block\Widget\Example">
<label translate="true">Example widget</label>
<description translate="true">This is an example widget</description>
<parameters>
<parameter name="name" xsi:type="text" visible="true" sort_order="0">
<label translate="true">Name</label>
<description translate="true">Please enter a name</description>
</parameter>
</parameters>
</widget>
And to use it in your Block Class:
public function _toHtml()
{
return '<p class="hello">Hello ' . $this->getName() . '</p>';
}
It's really that simple.
In your specific case I would suggest creating a widget with 4 parameters:
Header
Content
Button Text
Button Link

Warning: Failed propType: (children) Dropdown - Missing a required child with bsRole: toggle

when $sugList is a empty array.
Warning: Failed propType: (children) Dropdown - Missing a required child with bsRole: toggle. Dropdown must have at least one child of each of the following bsRoles: toggle, menu Check the render method of Uncontrolled(Dropdown).
<Dropdown id={"remote-sug" + Math.random()}
bsRole="menu"
className="remotesug"
onSelect={this.onSelect.bind(this)}
open={this.state.open}
onToggle={this.onToggle.bind(this)}>
<input {...props}
className="form-control"
type="text"
style={loadingStyle}
onInput={$.debounce(500,me.onInput.bind(me))}
disabled={this.state.disabled}/>
<Dropdown.Menu className="remotesug-list">
{$sugList}
</Dropdown.Menu>
</Dropdown>
According to the official documentation: "The Dropdown expects at least one component with bsRole="toggle"" That component will be used as the toggle for the dropdown, clicking it will open and close it.

How to show title below modal in magnific popup

I am opening an MVC view in magnific
I need to show a title (caption) below the modal
But caption is only for image type but I am using Ajax type.
I have set the title attribute on both the hyperlink that I click to open the modal and the root element of the view.
But it never shows up.
How do I do display the title (fixed or dynamic from a grid)? I wonder why author forgot to add this feature?
hyperlink:
<a class="edit-list" title="Edit List!" href="/manage/editlist/100">Edit</a>
Root element of the target page:
<form id="ListEditForm" class="white-popup" title="Edit List" action="/manage/EditList/100">
..fields go here
</form>
I followed this post, but he has markup, I don't:
http://codepen.io/dimsemenov/pen/zjtbr
Initialization:
$('.edit-list').magnificPopup({
type: 'ajax',
midClick: true,
callbacks: {
markupParse: function (template, values, item) {
values.title = item.el.attr('title');
}
}
});
This has been solved. I need to put the right container in the right place to render the title. The plugin won't drop any element to show the title.

Resources