I'm learning Tailwind CSS and Svelte, and to practice my skills I decided to make a widget layout with different components. I'm trying to make the grid's item's height flexible - like on the DaisyUI homepage under the components preview - so that other components can fit immediately beneath it. I've tried using flexbox but that lead to the same outcome. My code so far:
App.svelte:
<script>
import './app.css'
import Temp from './components/Temp.svelte'
import Login from './components/Login.svelte'
import Quiz from './components/Quiz.svelte'
import ShoppingList from './components/ShoppingList.svelte'
import Quote from './components/Quote.svelte'
import Date from './components/Date.svelte'
</script>
<main class="w-[calc(100vw - 120px)] max-w-[calc(100vw - 120px)] h-screen grid grid-flow-row grid-cols-5 gap-5 m-5">
<Temp />
<Login />
<Quiz />
<ShoppingList />
<Quote />
<Date />
</main>
All of the other components follow the same simple layout:
<script>
import '../app.css'
</script>
<section class="max-w-xs min-w-xs bg-slate-50 rounded-xl p-5 h-fit">
<!-- other HTML here -->
</section>
Any help or tips would be appreciated!
Related
I am trying to setup a carousel for my home page with a carousel with some full screen images and parallax effect on them. I am new to quasar but have used vuetify quite often but recently switched to Vue3 so figured I would try out quasar. However, I am struggling to do this. I see there is a slot for QCarouselSlide but I am not sure how to tie into that for this parallax.
My code so far is as follows:
<template>
<q-page padding="false">
<q-carousel
v-model="slide"
swipeable
animated
navigation-position="left"
navigation
padding
style="height:100vh"
class="bg-purple text-white rounded-borders"
>
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg"></q-parallax>
</q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg"></q-parallax>
</q-carousel-slide>
</q-carousel>
</q-page>
</template>
<script setup>
import { ref } from 'vue'
const slide = ref('style')
</script>
Please refer following codepen.
https://codepen.io/Pratik__007/pen/rNrrRxj
<q-carousel-slide :name="1" class="column no-wrap">
<div class="row fit">
<q-parallax
src="https://cdn.quasar.dev/img/parallax2.jpg"
>
<h1 class="text-white">Basic</h1>
</q-parallax>
</div>
</q-carousel-slide>
I am trying to learn Tailwind CSS and generally working better with CSS. In this case, I am trying to make my search icon appear inside of my search input field.
I found some tutorials online but they mostly use plain CSS.
Is there any simple way to achieve this using Tailwind?
import React from "react";
import { FaSearch } from "react-icons/fa";
const SearchBar = () => {
return (
<div>
<input className="bg-slate-50 hover:bg-red-200 rounded-3xl h-12 w-56" />
<FaSearch />
</div>
I also tried to wrap the input elment in a <div> and <form> tags, but none of those worked.
This should do it:
<div className='flex items-center'>
<input className='bg-slate-50 hover:bg-red-200 rounded-3xl h-12 w-56' />
<SearchIcon className='-ml-9' />
</div>
Docs:
align items | MDN
using negative margins | MDN
Now i want to remove the previous and next and also I want to style the slider which is shown as if it is very old , it's not modern
Acutally i want it to look something like how the react-bootstrap claims their carousel looks like :
Like this:
My code snippet is as follows
<Carousel pause="hover">
{product.images &&
product.images.map((image) => (
<Carousel.Item key={image.public_id}>
<img
className="d-block w-100"
src={image.url}
alt={product.title}
/>
</Carousel.Item>
))}
</Carousel>
I think the problem comes from your css. Did you put the bootstrap one ?
{/* The following line can be included in your src/index.js or App.js file*/}
import 'bootstrap/dist/css/bootstrap.min.css';
and I suggest "antd" instead of bootstrap (https://ant.design/components/carousel/)
I'm writing a personal Electron project with React-Bootstrap and Typescript but I can't put two radio controls next to each other. I followed the React-Bootstrap examples but it won't work. I'm not sure if it's just me or if I'm missing something. I also tried giving the inline props to the Form component, and writing it without the Container and Row components as well. I know it can be done playing around with the flex structure in Bootstrap but I'd rather stick to the React-Bootstrap components only.
import React from 'react';
import { Container, Row, Form } from 'react-bootstrap';
const ExperimentTypeForm = () => {
return (
<Container fluid>
<Row>
<Form>
<div key="inline-radio" className="mb-3">
<Form.Check inline label="1" type="radio" id="inline-radio-1" />
<Form.Check inline label="2" type="radio" id="inline-radio-2" />
</div>
</Form>
</Row>
</Container>
)
}
export default ExperimentTypeForm;
I was missing the .css import from Bootstrap:
import 'bootstrap/dist/css/bootstrap.min.css';
At first I ignored it because I couldn't get it to compile due to some missing configuration in my webpack config file. But after some digging I found this great answer on how to add the Bootstrap stylesheet to the App.tsx component.
So I have a search box component that is to be used in the Navigation bar on all pages of the site. I also want to use this component/html in other pages of the site hence I put it inside a component shown below
LocationSearchBox.js
import React, {PropTypes} from 'react'
import {Button,FormGroup, FormControl} from 'react-bootstrap'
import styles from '../scss/components/LocationSearchBox.scss'
export default function LocationSearchBox(props) {
return (
<FormGroup>
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={styles.navbarSubmitButton}>Get Weather</Button>
</FormGroup>
)
}
I am using css modules with web pack to convert my scss into css and than generate random styles to use in classnames for the components.
LocationSearchBox.scss
.navbarSubmitButton {
margin-left: 20px;
}
This used inside the component just adds some space between the input and submit button.
This is the NavBar component again with the help of react-bootstrap.
MainNavBar.js
import React from 'react';
import {Navbar, NavbarHeader, NavbarBrand, NavbarCollapse} from 'react-bootstrap';
import {default as Search} from './LocationSearchBox'
import styles from '../scss/components/MainNavbar.scss'
export default function MainNavbar() {
return(
<Navbar fixedTop className={styles.navbarColour} >
<NavbarBrand pullLeft >
<a href='#' className={styles.Brand}>Weather-app</a>
</NavbarBrand>
<Navbar.Collapse>
<Navbar.Form pullRight>
<Search/>
</Navbar.Form>
</Navbar.Collapse>
</Navbar>
)
}
Now I have created a homepage component and I want to use the LocationSearchBox component inside it.
Home.js
import React from 'react'
import {default as Search} from '../components/LocationSearchBox'
import styles from '../scss/components/Home.scss'
export default function Home() {
return (
<div className={styles.center}>
<h2>Enter a city and state</h2>
<Search />
</div>
)
}
The search component inside Home.js, the button has the same margin-left property was the navigation bar so it is moved to the right a bit. I don't want that to happen. I want it only to be applied to the search box used inside the navigation bar but I am unsure of how to do that with CSS modules and React components without creating a separate search box for the navigation bar but I see that as pointless when it will have the exact same code.
I feel like I am not using CSS modules correctly at all, I am not using its philosophy and the point of CSS modules correctly.
It's hard to say what the best approach would be without understanding why it needs to be visually different in those locations but generally I would update <Search /> to accept a new prop to conditionally apply the extra margin.
It could be theme if those two styles are likely to be used many times:
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={props.theme === 'foo' ? styles.navbarSubmitButton : null}>Get Weather</Button>
Or if it's more of an override you could provides a buttonClassName prop to add exceptional styles at specific call sites:
<FormControl type="text" placeholder="Search" />
<Button bsStyle="success" type="submit" className={`${styles.navbarSubmitButton} ${props.buttonClassName}`}>Get Weather</Button>