I want to ask how to display the Sample Title Bar in the Icon Window Max section only and this is my coding.
import React from 'react'
import { TitleBar } from 'react-desktop/windows';
export default function App() {
return (
<div style={{
display: 'block', width: 400, paddingLeft: 30
}}>
<h4>React Desktop Windows TitleBar Component</h4>
<TitleBar
title="Sample TitleBar"
controls
isMaximized="true"
background="orange"
/>
</div>
);
}
And want to show the Icon Window Max
before:
after:
Here is the code I got the link coding from: Link
As pert react desktop documentation they only provided support to hide/show all three control, there is no such specific prop which we can use to hide individual tool from title bar.
So if we want to hide the other two option apart from maximize we can use css and overwrite existing css in following way
.titlebar a[title="Close"],
.titlebar a[title="Minimize"] {
display: none !important;
}
I have given class to Titlebar component and hide element using css.
Codesandbox
Related
I am using reactstrap's Modal and I just want to expand its size to 95% of the visible area.
Currently, when applying the prop size="xl" to Modal, it is too small still for my needs. So, I found a potential solution on this page that showed applying a custom class coming from an external stylesheet into reactstrap Modal worked for him.
After following this advice, I succeeded in making the modal expand to 95% of visible area. Unfortunately, refreshing the page caused the modal to snap back to size xl. And so, I need a solution which reliably makes the reactstrap Modal apply the external stylesheet's styles and never 'snaps back' to xl.
What I tried, and results...
Adding the stylesheet to index.html as a <link /> in the /public folder.
I added this: <link rel="stylesheet" href="%PUBLIC_URL%/styles.css">
Result: fail.
I tried using styled-components. This failed for me because I had no success after trying to wrap divs around the modal which contained my styles. Perhaps there's a clever way of using reactstrap Modal and styled-components to create a HOC that can do this task?
Result: fail.
Used React state and event handler and a button which, when clicked, applied and removed the custom class name I used custom-modal-style. The way used it was like so...
import React, { useState, useEffect } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import './styles.css'
const toggle = () => setModal(!modal);
const ProductWizard = () =>
{
const [makeLarger, setMakeLarger] = useState(false);
const [modal, setModal] = useState(false);
return(
<>
<Button color="info" onClick={toggle}>Create Product</Button>
<Modal
size="xl"
centered
scrollable
isOpen={modal} toggle={toggle}
contentClassName={ makeLarger ? "custom-modal-style" : null }
// contentClassName="custom-modal-style"
>...</Modal>
</>
)
}
Here are the styles.css stylesheet contents...
.custom-modal-style {
position: fixed;
left: 5px;
width: 98%;
right: 5px;
max-height: 100%;
overflow: auto;
overflow-y: scroll;
display: block;
}
Result: fails to expand to 95% of the screen size, although it did slightly enlarge (by margin of around 20px to 30px).
Does anyone have a solution which causes the reactstrap Modal component to reliably expand to the dimensions of 95% of the screen size?
I am trying to change the default screen background colour of all the pages of the web application.
Technologies I used:
React JS
Next JS
Tailwind CSS
I want to make the screen background colour of all pages light grey as shown in the image instead of the default white colour.
Is there any way to do that all at once, or do we need to add background colour manually to every page?
If you are using NextJS you can make use of a custom file _app.jsx (if you are using javascript) or _app.tsx (if you are using TypeScript) to change the background colour (and many more by the way) of all your web pages.
You can create a div in the file and add background colour to the className, it will be applied to all pages being rendered in the web application.
Code example :
function MyApp({ Component, pageProps }) {
return (
<div className="bg-gray-500">
<Component {...pageProps}/>
</div>
);
}
NextJS has a more detailed explanation about this.
You can go to styles -> globals.css
and there add the following
html {
width: 100%;
height: 100%;
background-color: {color of your choice};
}
By this; all your pages will have the specified background color unless you specify a separate background color for any component.
Adding bg-color to a div only adds color to a div... I think the html { background-color: {color of your choice}; is more likely to yield the desired result. Having same issue. Applied your solution but it only filled the div that fell short of page view. Of course the previous comment's coding is incorrect.
should be:
html {
background-color: #yourcolor
}
I want something like this Here is the example!
I try with the material UI box, but it's not rendering the box only rendering the text.
Here is the code:
import * as React from 'react';
import Box from '#mui/material/Box';
export default function BreakpointsAsArray() {
return (
<div>
<Box sx={{ width: [100, 200, 300] }}>This box has a responsive width.</Box>
</div>
);
}
Material UI's Box name is quite deceptive and it doesn't mean a rectangle box will automatically be created in the rendered HTML. Here is some good explanation of the box component. You still need to add css/styling to make it according to your choice. The rectangle box you see in your shared image, is actually added (through some website code) to the better distinguish between the documentation text and the code snippet output. Anyhow, I forked the codesandbox example and added some custom styling to show, how the styling can be updated. You can use the sx prop to add any styles you needed. here is a little example.
sx={{
width: "90%",
padding: "24px 20px", // theme padding
border: "1px solid rgba(0, 0, 0, 0.12)",
borderRadius: 4
}}
I am using the Element UI component library for Vue 2. Element has a Tabs component as shown in the following screenshot (blue rectangle):
I want to add a button to where the red arrow is pointing. But the Tabs component doesn't have a native way to add an accessory UI component like that, such as by using a slot. Since this area is within the Tabs component, I don't see a way to insert an accessory component in that area.
If you look at the inspector, I basically have to insert a Button component after the div with the class tablist.
You could do this programatically:
Style the nav bar in el-tabs to set display:flex and justify-content:space-between:
.el-tabs__nav-scroll {
display: flex;
justify-content: space-between;
}
Add an el-button to the template, and give it a template ref (named btn).
<el-button ref="btn">Click me!</el-button>
Apply a template ref to the el-tabs component (named tabs).
<el-tabs ref="tabs">
In the mounted() hook, insert the el-button into el-tabs:
export default {
mounted() {
const scrollBar = this.$refs.tabs.$el.querySelector('.el-tabs__nav-scroll')
scrollBar.appendChild(this.$refs.btn.$el)
}
}
demo
I used the slot, the create button is obtained on the left.
<el-tabs>
<el-tab-pane
name="ExTab"
ref="ExTab"
>
ExTab
</el-tab-pane>
<el-tab-pane
name="add"
ref="add"
>
<span slot="label" >
<el-button
slot="reference"
type="primary"
round
icon="el-icon-plus"
style="margin: 0 1% 0 1% "
#click.stop="addTab()"
/>
</span>
</el-tab-pane>
</el-tabs>
Who knows how to customize Ant.design styles in proper way?
For example, I want to change the default backgroundColor and height of Header section:
import React, { Component } from 'react';
import { Form, Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
export default class Login extends Component {
render () {
return (
<div>
<Layout>
<Header style={{backgroundColor: '#555555', height: '5vh'}}>header</Header>
<Layout>
<Content>main content</Content>
</Layout>
<Footer>footer</Footer>
</Layout>
</div>
)
}
}
Is it ok, or there is a better way to customize styles?
Because I have not found some component's attributes or smth. like this.
Antd has externized most of their styling variable in LESS variables
as you can see in
https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
To be able to overwrite those variables you need to use modifyVar function from LESS
you can find more about theming here
So to your specific question, #layout-header-background does the job
This is how i customized the default antd styles in a particular component
In scss or less
.booking_information_table {
:global {
.ant-table-thead > tr > th,
.ant-table-tbody > tr > td {
padding: 0 0 !important;
background-color: unset;
border: none;
overflow-wrap: break-word;
}
}
}
In js file
after the import statement
import styles from './component.module.less'
In return
<Table
dataSource={bookingInformationDataSource}
columns={bookingInformationColumns}
pagination={false}
className={styles.booking_information_table}
/>
My personal approach (I'm working with dva-cli though):
Every time I need to override the CSS, I use a CSS file located in the same folder and import it such as:
your-component.js:
import styles from './your-stylesheet.css';
...
< AntdComponent className= {styles.thestyle} />
your-stylesheet.css:
.thestyle {
background-color: '#555555';
}
In the less file(like a CSS) you can handle customize styles. For
example in your case
.ant-layout-header{
height: 100vh;
background-color:#f50;
}
If you use Ant card
.ant-card-head{color:#j14}
I hope you can understand now
The above mentioned approaches work for simple components like Header but don't always work for complex components like Menu, Tabs, Collapse, Select, and others, due to styles nesting priority. At work we use the approach described by jayanes but we go deeper into nested Ant Design classes. Let me explain it in the following example: when you import Tabs from "antd", you have only 2 tags to override styles for: Tabs and TabPane.
<div className={styles.tabsContainer}>
<Tabs className={styles.tabs}>
<TabPane className={styles.tabPane}>
Tab 1 Title
</TabPane>
</Tabs>
</div>
But this antd component has a very complex structure. You can verify in dev tools: it has .ant-tabs-bar, .ant-tabs-nav-container, .ant-tabs-tab-prev, .ant-tabs-tab-next, .ant-tabs-nav-wrap, .ant-tabs-nav-scroll, .ant-tabs-tab-active, .ant-tabs-ink-bar and others.
The way to go is: in your less file nest the .ant-... classes inside your own parent component's className (in order to avoid overriding all the antd classes in the whole app after code compilation). Write there your own css properties, for example:
.tabsContainer {
.ant-tabs-tab-active {
background: #fff266;
color: #31365c;
&:hover {
color: darken(#31365c, 5%);
}
}
.ant-tabs-ink-bar {
background: #fff266;
}
}
If you still need more detailed explanation, please refer to the video I posted on YouTube on how to customize Ant Design components - tabs.
Override the component style
Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.
Override the component style
Customizing Antd theme Colors can be a hassle thus, I created a package that allows you to change them easily with post CSS you can even change them to CSS variables and change them in runtime.
For more info https://www.npmjs.com/package/ant-post-css-theme