I have Home, Contact and About menu in sidebar and I want a separation line between these menus.
In semantic UI react showing these separations but on screen not showing.
My React code is below
import "./styles.css";
import React, { Component } from 'react'
import { Sidebar, Menu } from 'semantic-ui-react'
export class SidebarComponent extends Component {
state = { activeItem: 'Home' }
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render() {
const { activeItem } = this.state
return (
<div>
<Sidebar
as={Menu}
animation='overlay'
icon='labeled'
inverted
vertical
visible
width='small' >
<Menu.Item
name='Home'
active={activeItem === 'Home'}
onClick={this.handleItemClick}
>
Home
</Menu.Item>
<Menu.Item
name='Contact'
active={activeItem === 'Contact'}
onClick={this.handleItemClick}
>
Contact
</Menu.Item>
<Menu.Item
name='About'
active={activeItem === 'About'}
onClick={this.handleItemClick}
>
About
</Menu.Item>
</Sidebar>
</div>
)}}
export default SidebarComponent;
After running my code I got this type of output ( Output image below)
Current Output
But I want this type of output (below)
Required Output
2 ways in which you can add a divider-
Using semantic-ui-react
Using Vanilla CSS
Using semantic-ui-react
import Divider from semantic-ui-react.
import { Sidebar, Menu, Divider } from 'semantic-ui-react'
And add this line of code after the first and second Menu.Item
<Divider fitted />
Using Vanilla CSS
in styles.css add -
.ui.vertical.menu .item{
border-bottom: 1px solid #000000;
}
this will add border-bottom for every item.
Related
I'm trying to create a somewhat basic custom block that creates a slider based off of the element's inner/nested blocks. Using React Slick, I've ran into an issue where ALL of the inner blocks are being wrapped in a single tag inside of the initialized slick slider element. This means, no matter how many inner blocks I add, there's only a single slide inside of the slick slider element.
Here's a screenshot of what's happening:
I've highlighted the to show you how the inner blocks elements (two basic paragraph blocks) are being combined as one singular slide.
Here's my edit.js:
import { __ } from '#wordpress/i18n';
import React from "react";
import Slider from "react-slick";
import {
InnerBlocks,
useBlockProps,
useInnerBlocksProps,
InspectorControls
} from '#wordpress/block-editor';
import {
PanelBody,
PanelRow,
} from '#wordpress/components';
import './editor.scss';
import classnames from 'classnames';
export default function Edit(props) {
const blockProps = useBlockProps( {
className: classnames( {
'slider': true
} )
} );
var settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1
};
const { children, ...innerBlocksProps } = useInnerBlocksProps( blockProps, {
templateInsertUpdatesSelection: true
} );
return (
<>
<InspectorControls key="1">
<PanelBody title={ __( 'Slides' ) }>
<PanelRow>
<fieldset>
Test
</fieldset>
</PanelRow>
</PanelBody>
</InspectorControls>
<div { ...innerBlocksProps }>
<Slider { ...settings }>
{ children }
</Slider>
</div>
</>
);
}
My gut is telling me this could have something to do with the timing of how the inner blocks get rendered, but I am a bit of a newbie when it comes to building custom blocks. Can anyone steer me in the right direction? I'd really really appreciate it. Thanks!
I'm experimenting with the windowing technique in Next.js with Antd, and I made this simple app that has this index.tsx page:
import { CSSProperties } from 'react'
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList as List } from 'react-window'
import { Card, Tooltip } from 'antd'
import data from '../data'
import styles from '../styles/Home.module.css'
const people = data();
const Row = ({ index, style }: { index: number, style?: CSSProperties }) => (
<div style={style}>
<Card bordered={true}>
<p>{people[index].name}</p>
<Tooltip title={`${Math.floor(people[index].age/15)} in dog years`}>
<p>{people[index].age}</p>
</Tooltip>
</Card>
</div>
)
const Home: NextPage = () => {
return (
<AutoSizer>
{({ height, width }) => (
<List
height={height}
itemCount={people.length}
itemSize={100}
width={width}
>
{Row}
</List>
)}
</AutoSizer>
)
}
export default Home
The FixedSizeList won't work until I add the following style in globals.css:
html, body, div {
height: 100%;
}
However, when I do that, it breaks the Tooltip by Antd. Usually what happens is that when I hover above a relevant element, the tooltip appears for a split second with 100% height and then disappears and it doesn't appear anymore on a page no matter where I hover.
How can I solve this?
I finally found a solution after much agony.
Apparently, Nextjs wraps the entire layout with a div with id __next. That's the outer-most container of the entire page, and its height is not set, so since the content of FixedSizeList is positioned such that it's outside of the regular page flow, the __next div gets a height of 0.
I don't know if there is any better solution, but I simply added this little style in the globals.css file:
div#__next {
height: 100%;
}
That fixed the issue without forcing every other div in the page to have height at 100% (which includes the tooltips and popovers).
As the title states, I would like for a MaterialUI FAB button to be centered and stay centered with resizing. The current placement is shown in the screenshot below (off-center) and it does not re-size with window change.
Here is the current FAB button component. It is a child component and I have shown the parent below as well.
I cannot get "justifyContent: "center"" to work as it normally does, as a note.
Any help on centering this and allowing it to scale with window size is welcome! thanks!
FAB button child component
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Fab from '#material-ui/core/Fab';
import NavigationIcon from '#material-ui/icons/Navigation';
import { navigate } from "#reach/router";
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
position: 'fixed',
bottom: "5vh",
right: "50vw",
backgroundColor: 'green',
width: "20vw"
},
},
fab:{
// fontSize: "35px"
},
extendedIcon: {
marginRight: theme.spacing(1),
// fontSize: "35px"
},
}));
export default function AddListingIcon() {
const classes = useStyles();
return (
<div className={classes.root}>
<Fab color="green" aria-label="add" size="large" variant="extended" className={classes.fab} >
<NavigationIcon onClick={() => {
navigate("/ChooseACategory")}} className={classes.extendedIcon}/>
Get Started!
</Fab>
</div>
)
}
Parent component which contains the FAB button child component
import React from "react";
import ReactNavbar from "../components/Navbar";
import Intro from "../components/Intro";
import GetStartedIcon from "../components/GetStartedIcon"
export default function GetStarted({ setSignedIn }) {
return (
<div>
<ReactNavbar setSignedIn={setSignedIn} />
<Intro />
<GetStartedIcon/>
</div>
);
}
Your code works as your wrote it (obviously). The right side of your button is centered as it should be.
You rather need to wrap the Button in a Flexbox. You can use the MUI Grid for that with a width:'100%', position:fixed and the prop justify="center".
Here is a jsfiddle with plain css
https://jsfiddle.net/rq6kvw12/
I am using React cards to show dynamic cards. I wanted to show 4 cards for desktop view at one row and 1 card for the mobile view but it is always coming vertically no cards are shown horizontally
The Container Component Of The card
import React from 'react'
import SongCard from '../SongCard'
import {
CardDeck
} from 'reactstrap';
function Popular({ popular }) {
return (
<div>
{popular.map((post) =>
<div key={post.etag}>
{
<CardDeck style={{display: 'flex', flexDirection: 'row',justifyContent: 'right'}}>
<SongCard
Title={post.snippet.title}
VideoId={post.id.videoId}
Image={post.snippet.thumbnails.high.url}
ChannelTitle={post.snippet.channelTitle} />
</CardDeck>
}
</div>)
}
</div>
)
}
export default Popular
And the card component is
import React from 'react'
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle
} from 'reactstrap';
function SongCard({ Title, VideoId, Image, ChannelTitle }) {
return (
<div>
<Card style={{maxWidth:'30em',flex: '1'}}>
<CardImg top width="100%" src={Image} alt="image" />
<CardBody>
<CardTitle>{Title}</CardTitle>
<CardSubtitle>{ChannelTitle}</CardSubtitle>
<CardText></CardText>
</CardBody>
</Card>
</div>
)
}
export default SongCard
First, in SongCard you might not need to encapsulate your card component in a div, it make your style for Card kind of unavailable because the div is by default full Width.
Secondly, CardDeck should be outside of the map loop cause you create a new CardDeck each post and it might not be what you want. to put you "key={post.etag}" directly in SongCard instead.
I also don't recommend to add custom style in style in CardDeck because you will break the default layout for all devices.
import React from 'react'
import SongCard from '../SongCard'
import {
CardDeck
} from 'reactstrap';
function Popular({ popular }) {
return (
<CardDeck>
{popular.map((post) =>
<SongCard
key={post.etag}
Title={post.snippet.title}
VideoId={post.id.videoId}
Image={post.snippet.thumbnails.high.url}
ChannelTitle={post.snippet.channelTitle} />
</div>)
}
</CardDeck>
)
}
export default Popular
And
import React from 'react'
import {
Card, CardImg, CardText, CardBody,
CardTitle, CardSubtitle
} from 'reactstrap';
function SongCard({ Title, VideoId, Image, ChannelTitle }) {
return (
<Card>
<CardImg top src={Image} alt="image" />
<CardBody>
<CardTitle>{Title}</CardTitle>
<CardSubtitle>{ChannelTitle}</CardSubtitle>
<CardText></CardText>
</CardBody>
</Card>
)
}
export default SongCard
This is my first question here and I'm a beginner to React app and semantic ui react, so sorry if my question is a little nooby.
So i created a menu using semantic ui react using after importing it.
Now I have an option to choose any background color for the menu among the given choices. But i want to set it to a custom color. So how do I target it in an override style sheet? I tried .ui.menu and failed. Here's the starting part of the code:
import React, { Component, createRef } from 'react'
import { Input, Menu, Image, Grid, Sticky } from 'semantic-ui-react'
import styled from 'styled-components'
import Link from 'next/link';
import { relative } from 'path';
export default class Navbar extends Component {
constructor(props) {
super(props);
}
state = { activeItem: this.props.currentPage }
contextRef = createRef()
render() {
const { activeItem } = this.state
return (
<div >
<Menu size="massive" className="size" pointing stackable>
<Image style={{ 'font-size': 50 }} avatar src='http://www.transitionsta.org/wp-content/uploads/2016/12/twitter-black-round-icon.png' className='logo' />
<Link href='/home'>
<Wrap>
<Menu.Item
name='HOME'
active={activeItem === 'home'}
position='right'
/>
</Wrap>
</Link>
<Link href="/contact">
<Wrap>
<Menu.Item
name='CONTACT US'
active={activeItem === 'contact us'}
position='right'
/>
</Wrap>
</Link>
<Link href='/aboutProfile'>
<Wrap>
<Menu.Item
name='ABOUT US'
active={activeItem === 'about us'}
position='right'
/>
</Wrap>
</Link>
</Menu>
So how would targeting Menu background color be done and how exactly would it differ from targetting a menu>item?
Thanks guys.
You can use
a className attribute (making sure it overrides current CSS, make use of !important when needed)
a inline style <Menu style={{ backgroundColor: 'red'}}>
Styled Components