I have a Svg and would like to make some parts of the viewbox attribute dynamic.
svg :viewBox="0 0 {{x}} {{y}}" :width="x" :height="y">
</svg>
What is the right syntax to implement this
You can't use interpolation, you will need a computed:
computed:{
viewbox(){
return "0 0 " + this.x + " " + this.y;
}
}
Then in your markup:
<svg :viewBox="viewbox" :width="x" :height="y"></svg>
The accepted solution does not work appropriately due to how svg handles viewBox.
You need to bind it as follows:
<svg :view-box.camel="viewbox" :width="x" :height="y"></svg>
With the other answer Vue converts the camel case of viewBox to all lowercase and the component does not render correctly. This will keep the correct camel case on viewBox
Related
I want to render a FontAwsome User Icon as done here inside a VueJS component, I have tried to replicate the same example as you can see in this codesandbox, and I have tried the two approaches as the latter mentioned in the documentation, and applied the corresponding settings:
el.innerHTML = "Hi <i class='fa-solid fa-user'</i>";
el.innerHTML = "Hi <font-awesome-icon icon='fa-solid fa-user' />";
but the FontAwsome Icon was not rendered inside a VueJs component, can you please tell me How can I solve that please? thanks in advance.
OP ended up using the following
el.innerHTML = 'Erreur <svg viewBox="0 0 384 512"><path fill="currentColor" d="M224 402.7V32c0-17.7-14.3-32-32-32s-32 14.3-32 32v370.7l-73.4-73.3c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7z"></path></svg>';
In web css, we can set css for sub element. Example:
<div class="test">
<p>abc</p>
</div>
And we can set the <p> css by:
.test p {
font-size:20px;
}
Now in React Native, I have this:
<View style={myStyle.test}>
<Text>abc</Text>
</View>
How we can set the <Text> style by myStyle.test?
Actually you can't use like css children, you have to set a custom style for each element that you wanna use.
CSS in react native is just a subset of web css and it doesn't allow you to do what you do in webCss. All you have is inline css. So you have to style them separately. You can avoid repeating by defining a common style object and pass that instead of repeating.
You can check out this library as well:
https://github.com/vitalets/react-native-extended-stylesheet
According to docs
All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color
Now cascading is not supported in react-native, yo =u have to provide a style prop to each element for it to be styled.
Is it possible to use v-if on style block, like so?
<style lang="scss" v-if="pinkTheme">
.ac-textfield
{
background: hotpink;
}
</style>
I tried this and it's not working (the v-if directive is ignored). I know that I could do this:
<div class="ac-textfield" v-style="{ background: pinkTheme ? 'hotpink' : false }"></div>
However, this will quickly become difficult to maintain if I want to modulate more than one style using the value of pinkTheme. Right now, I'm using CSS selectors to achieve the desired effect:
<template>
<div class="ac-textfield" :class="{ pinkTheme }">
</div>
</template>
<style lang="scss">
.ac-textfield
{
//...
}
.ac-textfield.pink-theme
{
background: hotpink;
}
</style>
However, I don't like this solution very much (I want to achieve greater separation between my themes, and I want the browser to only have to load one theme at a time). Is there any way to make something like the first code block work?
That cannot work as scss must be compiled to css - and this is done at build-time. v-if, though, is executed/interpreted at run-time only.
What would kind of work, is to include the style block in the template part of your single file vue component, but note that you can only use CSS, not SCSS, in there. That has the obvious downside of getting rendered alongside each of the component instances.
Your approach of using conditional CSS classes actually is the correct approach, so you should definitely stick to that.
v-if is used for conditional html rendering and v-if accept the getter function that should return either true or false. You can't use v-if with style.
I am trying to access ABC. I know that simple By.ClassName("bb") will not work here. How else can I access this content.
<body>
<div id="Frame">
<div class="bb"></div>
<div class="bb">ABC</div>
</div>
</body>
You can use the below css selector to get the value of "ABC".
.bb:nth-child(2)
You can use "XPath" Expression to find or locating your element.
Example : element = findElement(By.xpath("Your xpath expression");
For your XML use following line.
element = findElement(By.xpath("/body/div/div[#class='bb'][node()]");
There is a way to do this in the search using XPath but I am not an XPath expert. I can give you a solution using CSS Selectors. Basically you grab all the DIVs with class bb and then search their text to find the desired text.
String searchText = "ABC";
IReadOnlyCollection<IWebElement> divs = driver.FindElements(By.CssSelector("div.bb"));
foreach (IWebElement div in divs)
{
if (div.Text == searchText)
{
break; // exit the for and use the variable 'div' which contains the desired DIV
}
}
I have a templated custom widget that inherits from dijit.layout._LayoutWidget, dijit._Container, and dijit._Templated which gives my widget native Widget support for resizing, etc. All I need is a TabContainer, which is sized to the size of widget. Here is my widget.
<div dojoAttachPoint="containerNode">
<div dojoType="dijit.layout.TabContainer" tabPosition="top" style="width:100%;height:100%" >
<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">
hello
</div>
</div>
</div>
Everything looks fine but I get a weird TabList.
I looked into the problem. All the pieces of the widget and TabContainer have the correct width and height values. Only The tablist has a loooong width (50'000 something pixels wide): I have read about similar issues such as this one: http://bugs.dojotoolkit.org/ticket/10495, but in my case all the elements have correct width and length. I have no idea how does tablist get this long width.
I have also tried many ways of adding and removing style="width:100%;height:100;" for the parent container and its parents. But none of the configurations fixed the problem.
Is there a way to fix this problem?
Just in case someone is looking for the solution, I had the same problem, and came to this question. Though I looked at the bug reports, it didn't apply in my case, I was not embedding tabcontainer inside table or setting doLayout to false. I tried setting tabcontroller but that didn't work either. Finally after debuggin, turns out you have to provide 'resize' method in your widget and resize tabcontainer inside it in the following way
widgetTemplate = '... ' + //Our tabcontainer declaration
'<div dojoAttachPoint="containerNode">' +
'<div dojoAttachPoint="widgetTab" dojoType="dijit.layout.TabContainer"' + 'style="width:100%;height:100%" >' +
'<div dojoType="dijit.layout.ContentPane" title="tab" selected="true">hello</div></div></div>' +
'...' //Rest Of template declaration
//Since we are embedding widget inside template we need _WidgetsInTemplateMixin
dojo.declare("MyWidget", [dijit._Widget, dijit._TemplatedMixin,dijit._WidgetsInTemplateMixin], {
templateString: widgetTemplate,
.... //Rest of functions
resize: function(){
this.containerNode.widgetTab.resize() //Resize tabcontainer
}
});
Hope this helps
Try to add attribute to your TabContainer:
<div dojoType="dijit.layout.TabContainer" controllerWidget="dijit.layout.TabController" ... >
http://bugs.dojotoolkit.org/ticket/10113#comment:11
Just rewrite your css like this:
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 30px !important;
}
#-moz-document url-prefix() {
div[class="dijitTabListWrapper dijitTabContainerTopNone dijitAlignClient"]{
height: 31px !important;
}
}
If you want to remove the first one : "useMenu : false"
If you want to remove the second and the third : "useSlider : false"