https://ionicframework.com/docs/api/tab-bar#css-custom-properties
it tell me i can modify css but not work
HTML：
*<ion-tabs>
<ion-tab-bar slot="bottom" mode='ios' translucent=true>
<ion-tab-button tab="eqlt">
<ion-icon name="information-circle"></ion-icon>
<ion-label>e-Q</ion-label>
</ion-tab-button>
<ion-tab-button tab="epln">
<ion-icon name="information-circle"></ion-icon>
<ion-label>e-P</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>*
SCSS:
*ion-tab-bar {
--color: "success";
}*
why not work i am so confused.
Related
Sorry for the title, I don't know how to explain it.
I have an item like this :
<div class="faq__item">
<div class="faq__item-header"></div>
</div>
When I click on faq__item, I have an active class active
So in my scss, I want to style the header without selecting the whole child selector and keep the ampersand
.faq__item {
&.active{
.faq__item-header{ => I would like to avoid this
}
}
}
I don't know if I'm clear, I'm pretty sure I can optimise the code, but I don't know what to search
Store the parent selector in a variable and use it like so:
.faq__item {
$parent: &;
&.active {
#{$parent}-header {
/* rules here */
}
}
}
Is there a recommended way or best practice to apply the css rules of "global" default or custom themes to the shadow root of custom components created with a lit template?
There is a workaround with a connectedCallback to manually apply the theme with an imported "applyTheme()" function. Another description of the issue and the workaroundsee here
I have also found a ticket, with some sort of solution, but i just can't figure out how to use this to solve my issue.
That workaround doesn't seem to work when working with the Vaadin Designer plugin in intellij, as it doesn't seem to be able to use the "applyTheme()" function (unresolved import of "import { applyTheme } from frontend/generated/theme"). Also i'd like to avoid this workaround where possible.
If there is another solution than using the mentioned workaround, does it also work with custom themes / changed values of lumo css properties?
Example:
You create a custom component based on a lit template like this:
import '#vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';
import '#vaadin/vaadin-ordered-layout/vaadin-vertical-layout';
import '#vaadin/vaadin-select';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import {applyTheme} from "Frontend/generated/theme";
#customElement('stub-view-card')
export class StubViewCard extends LitElement {
//commented this, so we DO use a shadow root
/*createRenderRoot() {
// Do not use a shadow root
return this;
}*/
connectedCallback() {
super.connectedCallback();
// Apply the theme manually because of https://github.com/vaadin/flow/issues/11160
//this is not needed, if no shadow root like above is used
applyTheme(this.renderRoot);
}
render() {
return html`<li class="bg-contrast-5 flex flex-col items-start p-m rounded-l">
<div
class="bg-contrast flex items-center justify-center mb-m overflow-hidden rounded-m w-full"
style="height: 160px;"
>
<img id="image" class="w-full" />
</div>
<span class="text-xl font-semibold" id="header"></span>
<span class="text-s text-secondary" id="subtitle"></span>
<p class="my-m" id="text"></p>
<span theme="badge" id="badge"></span>
<slot></slot>
</li> `;
}
}
how it should look like
how it looks like without the connectedCallback and applyTheme()
I am using Vaadin 23 and a project generated from vaadin starter. My example was created from the "image list"-template.
I really appreciate any help and documentation that you can point me to :)
I'm using Webpack/Laravel and injecting vuejs on id #app in my page so to have skeleton loading page I want to have this markup
//client side, will show after ~0.2 seconds
<div id="app" v-cloak>
<hello-world>
</div
//server side, show for ~0.2 s then disappear
<div id="app__loading" v-cloak>
<div class="skeleton">
<span class="skeleton_ribs"></span>
</div>
</div>
I managed to display loading gif in background as pseudo element when v-cloak and everything inside from #app__loading is removed, but if I add normal elements in markup they appear at the bottom of the page after #app loads
[v-cloak] > * { display:none }
[v-cloak] + #app__loading::before {
content: url('https://i.pinimg.com/originals/65/ba/48/65ba488626025cff82f091336fbf94bb.gif');
display: flex;
justify-content: center;
align-items: center;
}
But I would like something like this to work with markup inside #app__loading, but it doesn't work
[v-cloak] > * { display:none }
#app-loader{
display: block;
}
[v-cloak] #app::finish-loading{
[v-cloak] #app-loader{
display: none!important;
}
}
You seem to be expecting the content your initial element to be found in the template of app root element. When using $mount() function, Vue completely replaces the target element with the template of the mounted element.
This replacement is somewhat masked by the fact that, out of the box, the index.html contains a <div id="app"> which gets replaced by the <div id="app">...</div> in your App.vue template.
But they're actually not related (and not the same element). If you changed the id of the one in index.html you'd need to change the target el in main.(js|ts). And obviously, you could change the id of the one in App.vue as well.
Now, to solve your issue, you could simply place v-cloak on the div in your App.vue. From what you've shown so far, that should make it work as expected.
For more complex use cases (i.e: if you wanted to trigger a particular event bound to the initial element) the way to go would be to wrap the initial placeholder in a parent, bind to the parent and, later on, in Vue, target the parent with this.$el.closest('.some-class') or with this.$el.parentElement() to access the binding.
If you still can't get the expected result, please create a mcve (you could use codesanbox.io) and describe in detail what is the expected behavior.
To make your headache smaller till you find proper vue solution, you can grab loader by id and when Vue instance mounts - give display none
export default {
mounted() {
document.querySelector('#app__loading').style.display = 'none';
},
}
The HTML DOM structure I have is, sort of, repetitive. Is there any good practice to refactor my sass rules?
HTML:
<div name="OpportunityDetailView" class="actor-wrapper"><div name="OpportunityDetailView" class="detail-view expansion-bottom-normal">...</div></div>
<div name="ApplicationDetailView" class="actor-wrapper"><div name="ApplicationDetailView" class="detail-view expansion-bottom-normal">...</div></div>
<div name="ProfileDetailView" class="actor-wrapper"><div name="ProfileDetailView" class="detail-view expansion-bottom-normal">...</div></div>
SCSS case 1:
div[name="OpportunityDetailView"] > div[name="OpportunityDetailView"],
div[name="ApplicationDetailView"] > div[name="ApplicationDetailView"],
div[name="ProfileDetailView"] > div[name="ProfileDetailView"],
{
css rules...
}
SCSS case 2:
.section {
div[name="Business_Image_Url__c"],
div[name="Name"],
div[name="Account_Name__c"],
div[name="Business_Type__c"],
div[name="Region_Province__c"] {
.label{
display: none !important;
}
}
If I'm not missing something, it seems like you can use the classes assigned to the elements to achieve what you want:
For case 1:
.actor-wrapper {
.detail-view {
//css code goes here
}
}
and please provide some markup for the case 2.
If all the div[name] elements share the same class, then you can group them by that class, as done with the above example.
I just started using vue-i18n and tried to use the v-on-directive (shorthand: #) in my language specific text.
What i tried to do:
// locale definition
let locale = {
en: {
withEventListener: 'Some HTML with <a #click="onClickHandler">event handling</a>'
}
}
and the vue template:
<!-- vue template be like -->
<p v-html="$t('withEventListener')" />
This doesn't throw an error but unfortunately it does not get evaluated by vue-js either. This would result to Plain-HTML like:
<p>
Some HTML with <a #click="onClickHandler">event handling</a>
</p>
So my question is if there is a way to make Vue 'evaluate' the text and thus 'translate' the directives within the text.
You can use Vue.compile to do something like this if you are including the standalone build script. I'm not familiar with vue-i18n, but this might put you on the right path.
Note that I had withEventListener to wrap it in a div because of the rules around templates.
let locale = {
en: {
withEventListener: '<div>Some HTML with <a #click="onClickHandler">event handling</a></div>'
}
}
const res = Vue.compile(Vue.t("withEventListener"));
Vue.component("internationalized", {
methods:{
onClickHandler(){
alert("clicked")
}
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
new Vue({
el:"#app"
})
With the template
<div id="app">
<internationalized></internationalized>
</div>
Working example.