Ant Design Blazor has a descriptions component for generating key/value pair elements. I'd like to add an icon and tooltip as the key/title. The problem is, that the title is set as an attribute like this:
<DescriptionsItem Title="Billing Mode">Prepaid</DescriptionsItem>
I have tried to set Title as child element, cause this would allow me to add any other components inside it:
<DescriptionsItem>
<Title>My title</Title>
My Text
</DescriptionsItem>
But this doesn't work, <Title> is a standalone component for html titles like h1, h2, ... which means both got rendered in the value section without any title:
I couldn't find a way to render other components in the title attribute, it just works in the body/value like this:
<DescriptionsItem Title="Created">
<Tooltip Placement="#PlacementType.Bottom" Title="creationIconTitle">
<Icon Type="plus-circle" Theme="outline" />
</Tooltip>
#Community.Created.ToLocalTime().ToString("G")
</DescriptionsItem>
But I'd like to have the icon in the title. Is there a way to realize this?
You are in luck! The source says the developers thought of this and added a TitleTemplate RenderFragment. Thus you can do something like:
<Descriptions Title="Descriptions">
<DescriptionsItem>
<TitleTemplate>
<AntDesign.Tooltip Placement="#PlacementType.Bottom">
<AntDesign.Icon Type="plus-circle" Theme="outline" />
</AntDesign.Tooltip>
31.10.2008 17:04:32
</TitleTemplate>
</DescriptionsItem>
</Descriptions>
This TitleTemplate is used over the Title, if defined source
Related
I am trying to place the logo in the middle of my navigation.
<f:section name="MainNavigation">
<f:if condition="{menu}">
<ul class="navbar-nav">
<f:for each="{menu}" as="item">
<f:if condition="{item.spacer}">
<f:then>
</ul>
<f:render section="MainNavigationLogo" arguments="{_all}" />
<ul class="navbar-nav">
</f:then>
<f:else>
The menu is splitting up, but the logo doesn't show up. I think it is because that {_all} does not contain the right information.
The MainNavigation is rendered this way
<f:render section="MainNavigation" arguments="{menu: mainnavigation, theme: theme}" />
How can I render af section inside another section in TYPO3?
There are no restriction to calls of sections in sections. But you need to provide the neccessary data.
As you wrote your prime section call just got two variables menu and theme, so other variables are not know inside the section, and could not be transfered any further.
You can test your set of variables by inserting this viewhelper call at different lines of your template:
<f:debug titel="identify this call">{_all}</f:debug>
Use the title attribute to provide a unique identifier of this debug code.
You might need to add another variable to your primary call so the infrmation also is available in your MainNavigationLogo section.
I have a simple component which is rendered by a click function, but it gets rendered twice, this is my code.
<SeeCompany
:is="create"
v-bind:companyId="companySelected"
#closeChild="closeModule"
/>
when i clicked in the button i change the create value to 'SeeCompany' so it gets mounted, but it repeats the same component text twice on the screen.
<b-button block
#click="create = 'SeeCompany'"
class="m-sides"
variant="outline-primary">
Ver
</b-button>
here is the image:
EDIT: Here is the code in the mounted
export default class SeeCompany extends Vue {
#Prop({ default: 0 }) private companyId !: number;
constructor() {
super();
}
private mounted() {
console.log(this.companyId); --> This is consoling two ceros (0) and the passed value for instance = 1;
}
}
There are two main uses for is.
Working around limitations in in-DOM templates.
Dynamic components.
For more information see https://v2.vuejs.org/v2/api/#is.
We can ignore the former case as it isn't relevant here.
Typically the second case looks a bit like this:
<component :is="childName" />
Here childName is a property of the component and determines the name of the child component to use. In your example you called it create.
The actual tag name used in the template doesn't really matter. It is common to use the dummy tag <component> for this purpose to avoid misleading future maintainers who may not immediately notice the :is. Whenever you see <component> you know you're in a dynamic component scenario.
When we talk about dynamic components it is important to appreciate exactly what we mean by 'dynamic' in this context. We are specifically talking about which component to use. We are not talking about determining whether or not to create the component in the first place.
In the code in the question the value of create is initially set to an empty string, ''. This is then passed to :is. If you inspect the DOM you'll find that this creates a comment node. While this does make some sense I am unclear if this is officially supported. I've not seen this behaviour documented anywhere and I suspect you may be getting lucky by falling down an internal code path that's intended for other things. It is not something I would be confident relying on in future versions of Vue.
The specific code of interest is:
<SeeCompany
v-bind:is="create"
v-bind:companyId="1"
/>
<SeeOther
v-bind:is="create"
v-bind:companyId="1"
/>
So if you inspect the DOM when create is '' you should find two comment nodes.
When create gets set to SeeCompany this is equivalent to:
<SeeCompany
is="SeeCompany"
v-bind:companyId="1"
/>
<SeeOther
is="SeeCompany"
v-bind:companyId="1"
/>
In turn this is equivalent to:
<SeeCompany
v-bind:companyId="1"
/>
<SeeCompany
v-bind:companyId="1"
/>
The result is the creation of two SeeCompany components. The original SeeOther tag is irrelevant here. This is why, as noted earlier, the convention exists to use a <component> tag to avoid being misleading.
Of course this isn't what you actually wanted the code to do. I'm unclear what the target behaviour is so I'm going to cover a few variations.
If you just want to show the components conditionally you'd use v-if instead:
<SeeCompany
v-if="create"
v-bind:companyId="1"
/>
<SeeOther
v-if="create"
v-bind:companyId="1"
/>
Usually you'd want create to be a proper boolean, false or true. So set the initial value to false with #click="create = true".
Of course this would show both SeeCompany and SeeOther at the same time. That may not be what you want either. Perhaps you only want to show one at once. For that you might do something like this:
<SeeCompany
v-if="create === 'SeeCompany'"
v-bind:companyId="1"
/>
<SeeOther
v-if="create === 'SeeOther'"
v-bind:companyId="1"
/>
Here the initial value of create should be a falsey value of some kind, possibly '', with #click="create = 'SeeCompany'" and #click="create = 'SeeOther'" on appropriate buttons.
If the props for the components are all the same, and especially if there are more than two components involved, you could try to simplify this using is:
<component
:is="create"
v-if="create"
v-bind:companyId="1"
/>
This is shorter but arguably not as clear.
I am trying to automate test case using Protractor and Jasmine. The problem is I have an "article" web element tag that gets created at runtime and this web-element has a as sub element. This div element has a "id" tag associated with it. The structure of the code is below.
<article class="a b c d" data-ng-repeat="xyz repeat">
<div id="THIS IS WHAT I WANT" class="class name">
</article>
Now I am able to get get hold of the article web-element. but I am not able to get the ID attribute in the div. The ID values is generated dynamically. Kindly suggest how I can get the ID value.
Thank you
You can use a CSS Selector like this:
article > div
This will get you a div inside of an article. Now you can use this to play around and specify the selector further with classes or other stuff.
If you managed to get the div element you can then pull out the idea using (not sure if the syntax is correct but you should get the idea):
element.getAttribute('id')
1) element(by.xpath(//div[#class='class name'])).getAttribute('id')
2) element(by.xpath(//article [#class='abcd']//div[#id='THIS IS WHAT I WANT'])).getAttribute('id')
You can use chains like this:
element(by.classname('')).element(by.className('classname'));
or
element(by.css('css of parent')).element(by.css('child css'));
or you can use element(by.repeater('repeat in reapeats')).element(by.css(''));
I am processing some HTML in VBA and want to inject a element to the tag.
oElement.insertAdjacentHTML "beforeEnd", "<base>HELLO</base>"
If I inspect the oElement.OuterHTML all that is added is HELLO
...<LINK rel=stylesheet type=text/css href="css/default.css">HELLO</HEAD>...
If I try adding li tags , it works as expected.
oElement.insertAdjacentHTML "beforeEnd", "<li>HELLO</li>"
Result
....<LINK rel=stylesheet type=text/css href="css/default.css">HELLO <LI>HELLO</LI> </HEAD>...
I've tried using just <base /> or <base href="blah blah , nothing get's added. Am I missing some key piece of knowledge about insertAdjacentHTML.
Any ideas??
You need to use IHTMLDOMNode interface for head object (don't know why, but it works). Create a "BASE" element, set attribute for href and finally add it to a head using appendChild.
I want to know what is the suitable replacement for this line.
this.__LZtextclip.text
I am using this to get the string present in the text node. This works fine in Openlaszlo 3.3 but in 4.9 and 5.0 it's giving a problem
I tried updating it to
this.sprite.__LZtextclip.text
And i am getting an error:
79: Error: Access of possibly undefined property __LZtextclip through a reference with static type LzSprite, in line: Debug.write(this.sprite.__LZtextclip.text);
Any idea why this problem is happening?
If you are trying to access the text content of a text field, why don't you just access the attribute text?
<canvas>
<text name="sample" id="gRead" />
<handler name="oninit">
gRead.setAttribute('text',"HI");
Debug.info(gRead.text);
</handler>
</canvas>
In OpenLaszlo 3.3 there is method getText(), which gives you the same value. Accessing mx.textfield in your code does not work for the DHTML runtime.
Edit: Added information regarding the stripping of HTML tags
The Flash Textfield class flash.text.Textfield provides an API to enable HTML tag content in a Textfield instance. There are two different properties, one called text, the other one htmlText. If you want to directly access the Flash Textfield object of an lz.text instance, it's a property of the display object of the lz.text instance:
// Flash Textfield instance
gRead.getDisplayObject().textfield
// Pure text content
gRead.getDisplayObject().textfield.text
// Formatted text
gRead.getDisplayObject().textfield.htmlText
You should be aware of the fact that Flash automatically adds HTML format to any textstring you set as content. When you do
gRead.setAttribute('text',"HI");
the textfield.htmlText value is
<P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="11" COLOR="#000000" LETTERSPACING="0" KERNING="1">HI</FONT></P>
For the DHTML runtime, the text content is added as the innerHTML of a <div> tag, and there is no standardized API to retrieve the pure text content of a DOM structure for a tag with content. You could write your own function to extract the text content, or use JavaScript functions from existing frameworks - like the jQuery text() function - to achieve the same result for the DHTML runtime.
I guess the reason is that Laszlo started using the Dojo based rich text editor for text input with HTML formatting since OpenLaszlo 4.0 or 4.1.
The best approach to have consistent behavior across runtimes when stripping tags is to do the conversion on the server-side. That's especially needed if you wan to have consistent whitespace treatment in multiline text, since there differences in how browsers treat whitespace. The question how to best strip tags from strings in JavaScript has been answered before on Stackoverflow, e.g. JavaScript: How to strip HTML tags from string?
Here is a cross-runtime example which works in DHTML with Firefox, Chrome, and it should work with IE9+:
<canvas>
<text name="sample" id="gRead" />
<handler name="oninit"><![CDATA[
gRead.setAttribute("text", 'Hello <b>World</b> OL');
Debug.info("gRead.text=" + gRead.text);
if ($dhtml) {
Debug.info(gRead.getDisplayObject().textContent);
} else {
Debug.info(gRead.getDisplayObject().textfield.text);
}
]]></handler>
</canvas>
I found what is the problem. The problem is that i have to declare a variable and have to refer the property from that.
<canvas>
<library>
<text name="sample" id="gRead">
<method name="getTextFrom">
Debug.write("this.text" , this.sprite);
var mx = this.sprite;
Debug.write("this.text" , mx.textfield.text);
</method>
</text>
</library>
<handler name="oninit">
gRead.setAttribute('text',"HI");
gRead.getTextFrom();
</handler>
</canvas>