I can't set the box-shadow property of ion-button to none in ionic 4, so how can I do that for a single button and for all the buttons at once ?
<ion-button class="main-button" >Get Started</ion-button>
.main-button{
--box-shadow:none;
}
CSS Custom Properties
--box-shadow
--background
--color
There is whole list of CSS Custom Properties in this link https://ionicframework.com/docs/api/button
I found a way that worked for me, the below code disables the ion-button shadow:
ion-button{
--box-shadow:none;
}
Related
I'm currently playing around with Headless UI and I can't seem to style any of the components.
This is the code in my tabs file
<template>
<TabGroup>
<TabList class="bg-blue-900/20 rounded-xl">
<Tab>Products Information</Tab>
<Tab>Find Offices Nearby</Tab>
<Tab>Requirements</Tab>
</TabList>
<TabPanels>
<TabPanel>Content 1</TabPanel>
<TabPanel>Content 2</TabPanel>
<TabPanel>Content 3</TabPanel>
</TabPanels>
</TabGroup>
</template>
<script>
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '#headlessui/vue'
export default {
components: {
TabGroup,
TabList,
Tab,
TabPanels,
TabPanel,
},
}
</script>
It's either of these problems
Tailwind CSS is not installed or configured properly so you cannot use Tailwind CSS classes like 'rounded-xl'.
'bg-blue-900/20' is not an inbuilt tailwind CSS class, so either customize color in tailwind or use inbuilt colours like 'bg-blue-400', 'bg-blue-500', etc
Tailwindcss v2.1 introduced JIT mode that generates styles on-demand.
You need to enable jit mode to use such classes like bg-blug-900/20.
You can see how to do that in official doc
I've seen some threads on how to remove the leaflet attribution in the bottom right.
It seems like the creators of leaflet have no issue with it, so to save space I'd like to remove mine.
Here is a thread on it, but no answers relate to Vue unfortunately.
https://gis.stackexchange.com/questions/192088/how-to-remove-attribution-in-leaflet
I'm using nuxt but would greatly appreciate help if it's directed toward Vue.
The l-tile-layer has an attribute-prop which indeed helps me add attributions, but removing it made me realize the attribution seem to be connected to the l-map component as it's visible with no tile layer.
TLDR: I want to remove the "Leaflet"
Suggestions?
With the Leaflet API, it is removed by this config.
https://leafletjs.com/reference-1.7.1.html#map-attributioncontrol
L.map('map', {
attributionControl: false
}
With vue2-leaflet it seems it is possible to do the same with the options prop
https://vue2-leaflet.netlify.app/components/LMap.html#props
<l-map
:options="{attributionControl: false}"
>
...
</l-map>
As Kunukn pointed out (and which answer also kindly was provided by mikeu here: Link to github
The solution for Vue is to add the attributionControl:false option.
However, my requirement was to keep my other attributions, but fortunately after experimenting a tiny bit I just had to add the l-control-attribution component with an empty prefix.
In HTML
<l-map :zoom="8" :center="[59.3293, 18.0686]" :options="{ attributionControl: false }">
<l-tile-layer url="http://localhost:8080/styles/mytheme/{z}/{x}/{y}.webp" :attribution=attribution>
</l-tile-layer>
<l-control-attribution position="bottomright" prefix=""></l-control-attribution>
</l-map>
In scripts
data(){
return{
attribution:
'©OpenMapTiles ©OpenStreetMap contributors'
}
}
I'm using Owl Carousel for Vue. It doesn't seem to work properly since all carousel items are visible in their global container, which is several screens wide (there's no overflow: hidden or any max-width to make only x items visible at a time).
Anyway I find myself forced to apply some container class to a wrapper that the plugin generates dynamically. To that end I do:
mounted () {
this.$nextTick(() => {
document.querySelector('.owl-carousel').classList.add('container')
})
}
But, querySelector('.owl-carousel') is null although I see it in the DOM.
How can I successfully select it?
wow a jquery plugin wrapped into vue ... with like 200 lines of props ...
props start here: L23
props end here : L220
but honestly just add your class here:
<div :id="elementHandle" :class="['owl-carousel', 'owl-theme', 'your-class-here']">
fork it
customize it
npm install <git repo url>
I have a Vue.js app that loads content in the created() method. I use a v-if tag to hide all of my UI until that content is loaded and ready to go. It works fine on the initial load, but if a user were to hit refresh in Chrome then the app displays (flashes momentarily) content that would not otherwise be displayed (based on the data being loaded in created).
From what I understand using the v-if tag, with a flag from my vuex store that indicates when the load has completed, is the proper way to hide content until I am ready to display it.
How can I avoid having the content flash on the refresh?
Vue.JS has solved this using the v-cloak directive. (see docs)
You add the v-cloak directive to your application's root element:
<div id="app" v-cloak>
...
</div>
Then add this CSS rule to your application's stylesheet:
[v-cloak] {
display: none;
}
Everything within the app div will then be hidden until Vue has initialized.
Are there limitations to compiling Svelte components as custom elements? For instance, are we able to nest components? And fill slots in those nested components?
I'm having trouble using a Svelte component as a custom element in my older Vue app.
I've got a Select and a Modal component in this simplified example: https://svelte.dev/repl/4d4ad853f8a14c6aa27f6baf33751eb8?version=3.6.4
I'm then compiling these with a standard-fare rollup.config.js:
export default {
input: "src/components.js",
output: [
// ...
{ file: "dist/index.min.js", format: "umd", name }
],
plugins: [
svelte({
dev: !production,
customElement: true,
// ...
}),
resolve(),
commonjs(),
!production && livereload("public"),
production && terser()
],
// ...
};
Then I go to use the custom elements. On click of the <conversational-select>, I get markup that looks like the following:
<conversational-select label="Domains" firstvaluelabel="All Domains">
<!-- shadow-root -->
<style>...</style>
<span class="select" >
<div class="select-value">Governance Board</div>
<div class="select-label" ></div>
</span>
<!-- The below div is the appropriate markup for Modal but the style isn't inlined and isn't slotted.
<!-- maybe because it didn't append as <sk-modal>? -->
<div ><slot></slot></div>
</conversational-select>
The "Modal" is sort-of rendering. But it doesn't fill the slot with span .chips. Doesn't inline the styles like the conversational-select does. Doesn't seem to attach its own event listeners. But does seem to create the fade transition thanks to Svelte's transition:fade directive.
I can reproduce this with a vanilla html file, so it's not Vue's fault.
Am I breaking some known rule with custom elements, butting up against the limitations of Svelte's custom element compilation, or just mistaken somewhere?
I was the author of the Svelte github issue that has been mentioned. I believe that I have a fix here. There were a few issues that existed:
slotted was never set
"nested" elements were not being added correctly
I expect the Svelte authors to make changes to my pull request, but if you want to use it, you can:
Clone my branch
Run npm && npm build && npm link
Go to your project and run npm link svelte