https://tailwindcss.com/docs/background-image#arbitrary-values
this is how I want to use Tailwind bg-image feature. This does not work using SvelteKit next 160 and Tailwind 3.0.9.
Code:
<script>
import globe from '$assets/bg/bg_globe2.png'
</script>
<div
class={`flex flex-col bg-primary-dark h-64 overflow-hidden bg-no-repeat bg-[right_-14rem_bottom_-10rem] bg-[url('${globe}')]`}
>
//children
</div>
the bg-[right_-14rem_bottom_-10rem] class works without problems, so I assume Tailwind has problem with Svelte file paths?
EDIT:
output from console.log(globe) is src/assets/bg/bg_globe2.png.
❌ Arbitrary values cannot be computed from dynamic values
<div class="bg-{ userThemeColor }"></div>
✅ Use inline styles for truly dynamic or user-defined values
<div style="background-color: { userThemeColor }"></div>
https://v2.tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support
Tailwind needs to find the full text value in your code to be able to generate the utility classes.
Related
I use react-slick library and it turns out that it sets its own "dir" attribute. I set the direction for the whole app in the main container, but react-slick overrides it for itself. Is there any option to fix this?
<div dir="rtl" className={appClassName}>
<div slick-slider slick-initialized dir="ltr">
// some code
</div>
</div>
I am creating a component in my react app however, I don't want to use global styling, but modules. The problem is that one of the classNames is an expression, how do I style it in with modules. Below is my code.
<div className="container">
<div className={`current image ${move}`}>
{images[this.state.index]}
</div>
<div className={`next image ${move}`}>
{images[this.state.next]}
</div>
</div>
how do I convert the expression <div className={`current image ${move}`}> to be styled in module.
for example, in modules <div className="container"> will be <div className={style.container}>.
thanks.
Simple answer to your question, to solve the above all you have to do is to concatenate the classnames into a single string, almost as you have done.
It can look something like this:
<div className={[style.next, style.image, style.move].join(" ")}>content...</div>
Here we simply construct an array of the module classnames and then join it together with a space as a separator.
If you however want some classes to be conditional, i recommend the npm package classnames. Then it could look something like this instead:
<div className={classNames(style.image, {
[style.current]: isCurrent,
[style.move]: isMoving
)}>
given that isCurrent and isMoving is declared boolean somewhere above this snippet.
I am making use of PrimeNG and Angular 8.
The code snippet is as follows -
<div class="p-col-12 p-md-6 p-col-nogutter drag-column">
<div *ngFor="let doc of availableDocs" class="ui-helper-clearfix">
<div class="ui-g-12 ui-md-4" pDraggable="docs" (onDragStart)="dragStart($event, doc)"
(onDragEnd)="dragEnd($event)">
<p-panel [header]="doc.title" [style]="{'text-align':'center'}">
<img src="assets/images/{{doc.extension}}.png">
</p-panel>
</div>
</div>
</div>
If in above code we remove the class ui-helper-clearfix, then the image cannot be dragged.
But in documentation no such requirement is mentioned. Can this be done without ui-helper-clearfix.
Or some other solution as it is not the layout i want.
I'm new to vue.js and am used to React. I'm currently trying to import an SVG logo into my header component but I'm not sure how. In react, I would simply do import Logo from './path; and use Logo wherever I needed it within the current component. This is basically what I'm attempting to do right now but I keep getting errors. Could anyone tell me how this could be done in Vue.js?
<template>
<header class="nav">
<img src={Logo} alt="24G Logo">
</header>
</template>
<script>
import Logo from '../assets/76_logo.svg';
export default {
name: 'Header'
}
</script>
<style lang="scss" scoped>
</style>
Here are three options. The best in my opinion is the third:
Simply input src like in any webpage <img src='../path/to/file.svg' ... though that come with some drawbacks (regardless if it's :src='logoPath' where logoPath is variable containing the same. For a short overview see this stack answer, and for more details see this article from css tricks.
Check out svg-vue-loader. Vue won't automatically import svg without a loader.
Just paste it in! (Open the svg file and copy paste it into the template.) The best option in my opinion, especially when prototyping or for smaller projects. Like so:
<template>
<header class="nav">
<svg ....
</header>
</template>
If that would make it too crowded later on, just make a new component, call it say Logo, and paste svg in there and then import MainLogo component into your header.
No need for svg-loaders. Though loaders are a dev dependency, so not like it would cost you anyway; they would just do the same thing you can do manually.
// in MainLogo.vue
<template>
<svg ....
</template>
// in MainHeader.vue
<template>
<header class="nav">
<MainLogo>
</header>
</template>
<script>
import MainLogo from '../path/to/file.vue'
export default {
components: { MainLogo }
}
</script>
Cheers
After searching and searching, and seeing all the answers were old, I went ahead and tried the newish v-html prop.
The result, success!
<div v-html="avatar" style="width: 100%"></div>
The avatar is a full element that I stored in the database.
No loaders, no imports, just using the built in resources of Vue.js
If you leave out the style, then the svg will not show.
Also, loading the full element enables me to attach a ref prop to the element. Enabling me to access the svg through script.
Hope that helps someone!!
I used this with avataaar's random avatar generator and stored the resulting svg to the database (mongo)
Here is another approach that I used:
<template>
<a href="#"
class="log-link-css-class">
<!-- SVG Icon Start-->
<img alt="alt message" class="your-logo-css-class"
src="#/assets/images/logofilename.svg">
<!-- <SVG Icon End /> -->
</a>
</template>
No import required. Vue automatically converts it to the unique URL.
edit your code
<script>
import Logo from '../assets/76_logo.svg';
export default {
name: 'Header',
data(){
Logo: Logo
}
}
I'm developing an Angular single-page app with a responsive layout. The current page I'm working on uses a tile-based layout that auto wraps extra tiles to the next row. The HTML is below and, in the responsive layout, it can show 1, 2, or 3 tiles per row depending on the width of the row (it positions them using floats).
<div class="tiled_panel">
<div class="tile_1">...</div>
<div class="tile_2">...</div>
<div class="tile_3">...</div>
<div class="tile_4">...</div>
<div class="tile_5">...</div>
...
</div>
Now each tile will be given a "Learn More" button. The design calls for a block to expand between the row of the selected tile and the row below. This block will be the full width of the row and will be closed when the user closes it or clicks on a different Learn More button.
My first thought was to arrange the HTML as below using ng-if to hide or display the expander divs but I can't figure out the CSS needed to have it display between the rows.
<div class="tiled_panel">
<div class="tile_1">...</div>
<div class="expander_1">...</div>
<div class="tile_2">...</div>
<div class="expander_2">...</div>
<div class="tile_3">...</div>
<div class="expander_3">...</div>
<div class="tile_4">...</div>
<div class="expander_4">...</div>
<div class="tile_5">...</div>
<div class="expander_5">...</div>
...
</div>
My second thought, since I'm using Angular, was to somehow use transcluding or including to insert the relevant HTML into the appropriate spot. Again, I can't figure out how to identify where I need to insert the HTML?
I've tried searching around for other people's solutions to similar problems since I figured its not that unusual a requirement but I haven't yet been able to find anyone else who is doing this.
Can anyone else suggest what I need to do to identify the where to insert the HTML or how to generate the CSS? Or even suggest another solution that I haven't considered yet?
Although I have 70% understand of what you mean, I think ng-class can simply solve what you've faced. The solution code is like below. And I setup jsfiddle.
Html looks like this.
<div ng-app="" ng-controller="MyCtrl">
<div class="tiled_panel">
<div>Tile 1 <a href ng-click="change_tile(1)">More</a></div>
<div class="expander" ng-class="{'close': opentile===1}">Expander 1<a href ng-click="change_tile(-1)">Close</a></div>
<div>Tile 2 <a href ng-click="change_tile(2)">More</a></div>
<div class="expander" ng-class="{'close': opentile===2}">Expander 2<a href ng-click="change_tile(-2)">Close</a></div>
</div>
</div>
Your controller code looks like this.
$scope.change_tile = function(value){
$scope.opentile = value;
}
$scope.change_tile(0);
Css looks like this.
.expander{
visibility: hidden
}
.close{
visibility: visible
}