I am mentioning link below This is semantic UI in react and i want to remove spaces between side menu and Tab Content
Semantic UI sandbox link: https://z3omnz.csb.app/
Current Look:
Want to this type:
Used basic CSS, but you can even use styled-components, etc.
Add a class name to Tab and also import a CSS file. As done below -
import React from 'react'
import { Tab } from 'semantic-ui-react'
import "./tabStyle.css"
const panes = [
{ menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
{ menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
{ menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
]
const TabExampleMenuPositionRight = () => (
<Tab
menu={{ fluid: true, vertical: true }}
menuPosition='right'
panes={panes}
className="styledTab"
/>
)
export default TabExampleMenuPositionRight
And in tabStyle.css use this code which will target the tab panes created by semantic-ui-react -
.styledTab .ui.grid>.column:not(.row) {
padding-right: 0px !important;
padding-left: 0px !important;
}
Related
i want to add ckeditor 5 to nextjs from source.
but i am facing many errors.
Global CSS cannot be imported from within node_modules.
can someone help me add custom ckeditor 5 to my nextjs project.
i dont know how to configure next.config.js.
the problem is why i want to add from source ekditor to my project becuase i want to some new custom plugins to upload image from unsplash.
when i click on unsplash icon new pop page should be appear where user can search image and when use click on than image it add that image to ckeditor.
to use custom ckeditor plugins i am using custom ckeditor 5 from source.
// The editor creator to use.
import ClassicEditorBase from "#ckeditor/ckeditor5-editor-classic/src/classiceditor";
import Essentials from "#ckeditor/ckeditor5-essentials/src/essentials";
// import UploadAdapter from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
import Autoformat from "#ckeditor/ckeditor5-autoformat/src/autoformat";
import Bold from "#ckeditor/ckeditor5-basic-styles/src/bold";
import Italic from "#ckeditor/ckeditor5-basic-styles/src/italic";
import BlockQuote from "#ckeditor/ckeditor5-block-quote/src/blockquote";
import React, { useEffect, useState } from "react";
import CKEditor from "#ckeditor/ckeditor5-react";
const Editor = ({ data }) => {
const [isLayoutReady, setIsLayoutReady] = useState(false);
useEffect(() => {
setIsLayoutReady(true);
}, []);
return (
<div>
{isLayoutReady ? (
<CKEditor
data={data}
onInit={(editor) => {
console.log("Editor is ready", editor);
}}
onChange={(event, editor) => {
console.log("Change", { event, editor });
}}
onBlur={(event, editor) => {
console.log("Blur.", { event, editor });
}}
onFocus={(event, editor) => {
console.log("Focus.", { event, editor });
}}
config={{
plugins: [
// InsertImage,
Unsplash,
Essentials,
// UploadAdapter,
Autoformat,
Bold,
Italic,
BlockQuote,
// FindAndReplace,
Heading,
Image,
ImageResize,
ImageInsert,
ImageCaption,
ImageStyle,
ImageToolbar,
],
toolbar: [
// "insertImage",
"undo",
"redo",
"removeformat",
"heading",
"bold",
"italic",
"link",
"underline",
"|",
"blockquote",
"bulletedList",
],
placeholder: "Click here to start typing",
}}
editor={ClassicEditor}
/>
) : null}
</div>
);
};
export default Editor;
I want to change the underline of:
I use material ui version 4.12.3
The code for creating my tabs is here:
function renderTabs(): JSX.Element {
return (
<Tabs className={classes.tabBar} value={activeTab} component={Paper} onChange={handleChange} centered>
{TABS.map((tab: string) => {
return (
<Tab
className={classes.tabButton}
key={`tab-${tab}`}
label={tab}
value={tab}
component={Link}
to={`${url}/${tab !== TABS[0] ? tab : ''}`}
/>
)
})}
</Tabs>
)
}
and in my tab_menu.style.ts I have the following code:
export default makeStyles(() =>
createStyles({
root: { width: '60%', margin: 'auto' },
tabBar: {},
tabButton: {},
})
)
I tried to change colors/background colors/text decorations in the tabBar as well as the tabButton, but the blue underline never changed.
How can I change the underline style?
As per material-UI documentation (Tab API, Tabs API) , you need to pass classes instead of className as a prop. Just write classes instead className.
I have a dropdown from Fluent UI and want to change the CSS of the dropdown options.
I can add classes though className to the dropdown, but I can't reach the dropdown options through adding CSS here because the dropdown options exist on a layout on the same level as <div id="root">. Is there a way I can set the CSS only to apply to this dropdown (preferably from the dropdown component)?
My code is as following:
const styles = mergeStyleSets({
main: {
selectors: {
"& .ms-Dropdown-title": {
color: "red"
},
"& .ms-Dropdown-optionText": {
color: "blue" //does not work
}
}
}
});
const Test = () => {
const options = [
{ key: "A", text: "I am an option" },
{ key: "B", text: "Do not choose me" },
{ key: "C", text: "Here is a third option" }
];
return (
<div style={{ width: "300px" }}>
<Dropdown
placeholder="Select an option"
label="Choose something"
options={options}
className={styles.main}
/>
</div>
);
};
Codesandbox:
https://codesandbox.io/s/bold-moon-u0ol2?file=/src/App.js
Just use the styles property:
<Dropdown
placeholder="Select an option"
label="Choose something"
options={options}
styles={{
title: { color: 'red' },
dropdownOptionText: { color: 'blue' }
}}
/>
It gives fine grained control over the single elements of a dropdown that can be styled and, in an editor like VSCode, autocompletion suggests all styleable elements.
Updated Codesandbox: https://codesandbox.io/s/elegant-noyce-ddjek?file=/src/App.js
If you want to use a conditional styling for each dropdown option based on the disabled property, you can do the following:
export const optionsWithCustomStyling: any = (
options: IDropdownOption[]
) =>
options.map((x) => ({
key: x.key,
text: x.text,
styles: {
optionText: {
color: `${x.disabled ? '#FF0000' : '#000000'}`,
},
}
})
)
I just begin with FullCalendar , i'm implementing it in a react project , everything good now but i want to customize the actual calendar , iwant it to respect my customer need.
My question : is it possible to add a classname to the FullCalendar component like this :
( i tried but i can't reach the classname in my css file )
<FullCalendar
className= "FullCalendarMonthClient"
defaultView= "dayGridMonth"
plugins={[dayGridPlugin]}
columnHeaderFormat= {{
weekday: "long"
}}
locale="fr"
events={[
{ title: 'event 1', start: '2019-12-06', end: '2019-12-07' },
{ title: 'event 1', start: '2019-12-06', end: '2019-12-07' }
]}
/>
and after use it to customize my calendar with css. I use on the same page an other calendar , a DayView that why i ask to put a classname in my component so i can style my dayview/monthview without touching the Monthview. Or how can i create my own theme ?
Thanks comunity
You can create a styled wrapper that will overwrite the internal styles.
import FullCalendar from "#fullcalendar/react";
import styled from "#emotion/styled";
export const StyleWrapper = styled.div`
.fc td {
background: red;
}
`
const MyApp = ()=> {
return (
<StyleWrapper>
<FullCalendar/>
</StyleWrapper>
);
}
Indeed, a styled wrapper works. For example, try changing the buttons (next, prev) in the Calendar:
import FullCalendar from "#fullcalendar/react";
import timeGridPlugin from '#fullcalendar/timegrid';
// needed for the style wrapper
import styled from "#emotion/styled";
// add styles as css
export const StyleWrapper = styled.div`
.fc-button.fc-prev-button, .fc-button.fc-next-button, .fc-button.fc-button-primary{
background: red;
background-image: none;
}
`
// component with calendar, surround the calendar with the StyleWrapper
function Schedule({ ...props }) {
return (
<StyleWrapper>
<FullCalendar ... />
</StyleWrapper>
);
}
export default Schedule;
If you happen to be using #fullcalendar/react with #fullcalendar/bootstrap and #fullcalendar/rrule YOU NEED TO CHECK YOUR IMPORTS.
I have having an issue where the rrulePlugin was over-riding my bootstrap theme, It was the way I was importing.
Import in this order solved it for me
import React from 'react';
import {Card, CardBody, CardHeader, Col, Row} from 'reactstrap';
import FullCalendar from '#fullcalendar/react';
import dayGridPlugin from '#fullcalendar/daygrid';
import interactionPlugin from '#fullcalendar/interaction';
import timeGridPlugin from '#fullcalendar/timegrid';
import listPlugin from '#fullcalendar/list';
import rrulePlugin from '#fullcalendar/rrule';
import bootstrapPlugin from '#fullcalendar/bootstrap';
<div>
<CardBody className="p-0">
<FullCalendar
ref={calendarRef}
headerToolbar={false}
plugins={[ // plugins MUST be in this order for mine to work or else I get errors
rrulePlugin,
dayGridPlugin,
bootstrapPlugin,
timeGridPlugin,
interactionPlugin,
listPlugin,
]}
initialView="dayGridMonth"
themeSystem="bootstrap"
dayMaxEvents={2}
height={800}
stickyHeaderDates={false}
editable
selectable
selectMirror
select={info => {
console.log("calendarInfo", info.start.toISOString())
if(info.start < moment().subtract(1, 'day')) {
toast(
<Fragment>
<strong>Select Future date</strong>
</Fragment>
);
} else if(isCompose) {
return (calendarView === "Month View" ? setShowTimeModal(!showTimeModal) : ""),
setAddScheduleStartDate(info.start.toString())
} else {
setAddScheduleStartDate(info.start.toISOString());
setIsOpenScheduleModal(true);
}
}}
views={views}
eventTimeFormat={eventTimeFormat}
eventClick={handleEventClick}
events={calendar}
buttonText={buttonText}
eventDrop={(e) => { return console.log("eventDrop ran======-----======", dispatch(calendarUpdate({start: e.event.start, end: e.event.end, _id: e.event._def.extendedProps._id})))}}
/>
</CardBody>
</div>
I am using react native navigation version 1.1.486 by wix. I am using
topTabs and want different colors for navbar and tapbar, but the
properties I a passing is not working.
I am sharing my code here:-
import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
const startTabs = ()=>{
Promise.all([
Icon.getImageSource("md-map",30),
Icon.getImageSource("ios-share-alt",30),
SimpleIcon.getImageSource("menu",30,'red'),
SimpleIcon.getImageSource("question",30,'black')
]).then(sources =>{
Navigation.startSingleScreenApp({
screen: {
screen: 'prabhuji.CustomPack',
topTabs: [
{
screenId: 'prabhuji.FlowerTabOne',
title:'Tab 1',
icon: sources[1],
},
{
screenId: 'prabhuji.FlowerTabTwo',
icon: sources[0],
title:'Tab 2'
}
],
navigatorButtons: {
leftButtons:[
{
icon:sources[2],
title:"Menu",
id:"SideDrawerToggle"
}
],
rightButtons:[
{
icon:sources[3],
title:"Help",
id:"Help"
}
]
},
},
appStyle: {
tabBarBackgroundColor: '#0f2362',
selectedTabFontSize: 12,
}
});
});
}
export default startTabs;
The effect for this code is:-
Is there any way to use different colors for toptabs and navbar? May
be I am asking a silly question. Apology for that, I am new to react native.
Don't put the styles in navigatorStyle, just add all tab properties to appStyle , you should add BottomTabs styles to AppStyle.
Here's an example :
appStyle: {
tabBarBackgroundColor: '#0f2362',
tabBarButtonColor: '#ffffff',
tabBarHideShadow: true,
tabBarSelectedButtonColor: '#63d7cc',
tabBarTranslucent: false,
tabFontFamily: 'Avenir-Medium', // existing font family name or asset file without extension which can be '.ttf' or '.otf' (searched only if '.ttf' asset not found)
tabFontSize: 10,
selectedTabFontSize: 12,
},
Another way
1. Disabling persistent styling properties :
appStyle: {
keepStyleAcrossPush: false
}
2. Setting styles dynamically:
this.props.navigator.setStyle({
navBarBackgroundColor: 'blue'
});