So a standard html attribute is one with the attribute name on the left and the value in quotes on the right. (class="buttons")
To change something on an element in Ionic the syntax is value name only, no quotes.
However I've noticed that sometimes that value is called a directive, other times a property and other times an attribute. What's the difference?
Here are examples of each from the docs :
buttons use a standard element, but are enhanced with an ion-button directive.
<button ion-button>Button</button>
The color property sets the color of the button. Ionic includes a number of default colors which can be easily overridden:
<button ion-button **color="light"** >Light</button>
// what I consider an attribute is being called a property here.
To use the outline style for a button, just add the outline property:
<button ion-button color="light" **outline** >Light Outline</button> //outline is called a property as well.
Add the large attribute to make a button larger, or small to make it smaller:
<button ion-button **large** >Large</button>
//large is being called an attribute here. Why not call it a property or a directive?
Does any of it make a difference or no?
Button is one of Angular components which Ionic is largely consist of. So to get it short:
ion-button is a component which is build upon [ion-button] selector as you can find it here in source
color, outline, large are the inputs of ion-button component as you can also see in source
From the DOM point of view all of these are attributes. Although if you really need to have an exact [attribute] to be compiled by Angular you've got to use [attr.attribute] binding which is not the same for directives/component and its inputs. Inputs are the properties of directives/components at the same time.
Related
I've been looking for a way to prevent v-navigation-drawer from shortening texts by itself on Vuetify. When I fill some spaces with text in the v-navigation-drawer, the text goes like "gobbled...". I mean, I want the tags inside to smoothly text such as "gobbledygook". How can I achieve this? I hope the image below helps you what's the problem exactly is.
Problem: I don't want v-navigation-drawer to shorten the texts inside of itself.
Edit: The code goes like:
<v-navigation-drawer
dark
color="#fff"
width="160"
v-model="is_drawer"
v-if="$vuetify.breakpoint.smAndDown">
// many <v-list-item> and <v-list-group> inside here
// and shrinking-text problem occurs on v-list-item-title
</v-navigation-drawer>
The issue is in the list title item title, to fix this add the following CSS rules :
.v-list-item__subtitle, .v-list-item__title{
text-overflow: initial!important;
white-space: initial!important;
}
The list item text is automatically truncated when the length of text is too long. Although there is no built-in method to disable text truncation, it can be disabled by using the class d-flex on v-list-item-title, since text truncation requires display block.
To allow long text to wrap, there is another helper class text-wrap.
See this codesandbox with all options in action: https://codesandbox.io/s/hungry-voice-bbxtg?file=/src/components/HelloWorld.vue
I want to change some part of the site based on selected language without any refresh. All worked but I have tried multiple ways to bind background-image dynamically on no refresh site language change (i18n). But no success.
<div :style="{'background-image' : mainBackground}">
test div
</div>
I have created a computed to return currently used link based on language.
mainBackground(){
return this.isTurkishSite ? 'url(/images/home/home_bg_main_tr.jpg);' : 'url(/images/home/home_bg_main.jpg);'
}
But after change site language by dropdown all other elements src are updated to use the selected language image file. But only this background path is not updating. Also style attribute is deleted on the element itself. I can not figure out why this solution not worked properly. Also rendered mainBackground computed into the div element. And returned link is updated based on language.
I have solved the problem by using class binding. 1 class for Turkish lang, and main class for all other languages. And used them in conditional class binding. Solution:
:class="[isTurkishSite ? 'bg-turkish' : '']"
It's not working because of the semicolons you put at the end of url() directives, css rules set in object notation with Vue don't require semicolons :)
I'm trying to style a Buefy button to look like a simple text-link.
For example, it is possible to use:
<b-button
tag="a"
type="is-text"
href="https://www.example.com"
>
Click here
</b-button>
This produces near the result I'm looking for, except I want to achieve a type such as is-text-red and is-text-blue to make the button appear as text of particular colours.
I could solve this by simply using:
Click here
Click here
But I want to use <b-button type="is-text-red"> to make an inline link.
Can anyone point me in a direction that involves Bulma CSS and/or Buefy CSS modifications that would achieve this?
I'm looking at the node_modules BButton component, and it looks like the type prop is passed through, so it looks possible to create a custom type somewhere that would be analogous to is-info and is-warning.
I would like to have text-only versions such as is-text-info and is-text-warning so I can use the button component to place inline anchor tags.
Stated concisely, how does a person add another type to <b-button> that provides arbitrary styling?
Check this link(https://buefy.org/documentation/customization/). You might need to define your own css overrides.
How to write a CSS Selector selecting elements NOT having a certain attribute?
I have 2 <div> nodes as follows:
First:
<div class="weEq5" style="will-change; width;">
<button class="_35EW6">
Second:
<div class="weEq5">
<button class="_35EW6">
I need to select the <div> (with the similar class) and each of them which have a similar descending <button> but without the style attribute.
XPath seems working fine as:
//div[#class and not (#style)]/button
I am looking for an equivalent CssSelector.
Trials:
div[class :not(style)]>button (doesn't works).
I have been through the following discussion but they seem to be discarding the class attribute as :not([class]) as in:
Can I write a CSS selector selecting elements NOT having a certain class?
Is it possible to define in CSS NOT to apply style if element have certain class? [duplicate]
I was looking in similar lines ending with :not(attribute).
I think more accurate CSS Selector is:
div[class]:not([style])>button
because the button element is a child of div element.
Hope it helps you!
That's the code you're looking for:
div:not([style]) button{
background-color: red;
}
Now let's break it down.
We have have four selectors in this example:
div and button - these select html elements. We can replace it for example with a class selector like .weEq5.
:not() - indicates that we want everything that does not qualify as the selector inside the brackets.
[style] - an attribute selector which is very powerful. We can place inside the not any other css selector like html tag names (button or div), class names or ids.
The combination of div:not([style]) means that we want all divs that do not have a style attribute. After which we have a space and a button means that we want all the buttons that are inside the above selector.
Adding a > before the button div:not([style]) > button will only select button elements which are direct children of the selected div. It will exclude from selection buttons that are deeper inside the div.
Normally, you would write :not([style]) to match an element that does not have a style attribute, as described here which emphasizes the use of both () and [] brackets, in that order.
But if this isn't working in Selenium WebDriver, and worse still if :not(style) works exactly like how I would expect :not([style]) to, then that's a bug with its CSS selector parser, since :not(style) actually means "not a style element" which makes div:not(style) redundant as an element can only either be a div or a style but not both at the same time. Unless you absolutely require a selector, I strongly recommend using the XPath locator strategy instead of relying on quirks like this with Selenium WebDriver's CSS selector engine that force you to write selectors that are both incorrect and don't work anywhere else that accepts a selector.
I do not understand how the situation developed in the first place, where the structure of the page necessitates the CSS rules to be aware of whether "style=..." exists in the document itself. Or even why style=... is being used.
The style attribute is old-school now, pre-CSS I believe. It also takes precedence over anything in the CSS. That attribute does not accept CSS class names. It accepts only native html style properties like "width","height","font" - old-school stuff - ultimately those are what your CSS resolves to, no matter how fancy or obfuscated it is through frameworks: font, width, left, top, float.. and so on.
By use of the class attribute (instead of style) in the document you get infinite control from which to write smart selectors in your CSS.
You can put 3 classes in the class attribute of your div for example, if you want, and have your selectors apply styling to it if 2 of the classes are present but not if all 3 are there. Tonnes of flexibility, no need to override or use "style=..." in the document at all.
I created this NumberSpinner widget:
<input name="form_action_fy" id="form_action_fy" value="2010"
data-dojo-type="dijit.form.NumberSpinner"
data-dojo-smallDelta="1"
data-dojo-largeDelta="1"
data-dojo-constraints="{min:2010,max:2030,places:0}" />
When I load the page, the widget shows as expected. However, there are a couple of issues:
The value is empty and not 2010.
When I press the decrease button on the empty widget, I get 9000000000000000 and when I increase on the empty widget, I get -9000000000000000. It doesn't stick to the min/max specified.
And, the smallDelta and largeDelta do not work either.
What am I doing wrong here?
Thanks
Eric
In the new widget attribute style the properties that are passed to the constructor function are all put in the data-dojo-props attribute, instead of the ad-hoc attributes of old. In the cases where the docs still point to the older declarative style you might get better luck by looking for the programatic style examples instead.
<input name="form_action_fy" id="form_action_fy"
data-dojo-type="dijit.form.NumberSpinner"
data-dojo-props="
value:2010,
smallDelta:5,
largeDelta:10,
constraints:{min:2010,max:2200,places:0}"
/>
Live example: http://jsfiddle.net/missingno/cQfFt/
Do note that in Dojo 1.6 a couple of widgets are still in transition so some attributes might need to be duplicated in prop and attribute form. Things should be allright in 1.7 though.