material-ui | MUI Core : Ready-to-use foundational React components | User Interface library
kandi X-RAY | material-ui Summary
Support
Quality
Security
License
Reuse
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here
material-ui Key Features
material-ui Examples and Code Snippets
Lines of Code : 117License : Permissive (MIT License)
Copy
import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { useRouter } from 'next/router'; import NextLink from 'next/link'; import MuiLink from '@mui/material/Link'; import { styled } from '@mui/material/styles'; // Add support for the sx prop for consistency with the other branches. const Anchor = styled('a')({}); export const NextLinkComposed = React.forwardRef(function NextLinkComposed(props, ref) { const { to, linkAs, replace, scroll, shallow, prefetch, legacyBehavior = true, locale, ...other } = props; return ( ); }); NextLinkComposed.propTypes = { href: PropTypes.any, legacyBehavior: PropTypes.bool, linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), locale: PropTypes.string, passHref: PropTypes.bool, prefetch: PropTypes.bool, replace: PropTypes.bool, scroll: PropTypes.bool, shallow: PropTypes.bool, to: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired, }; // A styled version of the Next.js Link component: // https://nextjs.org/docs/api-reference/next/link const Link = React.forwardRef(function Link(props, ref) { const { activeClassName = 'active', as, className: classNameProps, href, legacyBehavior, linkAs: linkAsProp, locale, noLinkStyle, prefetch, replace, role, // Link don't have roles. scroll, shallow, ...other } = props; const router = useRouter(); const pathname = typeof href === 'string' ? href : href.pathname; const className = clsx(classNameProps, { [activeClassName]: router.pathname === pathname && activeClassName, }); const isExternal = typeof href === 'string' && (href.indexOf('http') === 0 || href.indexOf('mailto:') === 0); if (isExternal) { if (noLinkStyle) { return ; } return ; } const linkAs = linkAsProp || as; const nextjsProps = { to: href, linkAs, replace, scroll, shallow, prefetch, legacyBehavior, locale, }; if (noLinkStyle) { return ; } return ( ); }); Link.propTypes = { activeClassName: PropTypes.string, as: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), className: PropTypes.string, href: PropTypes.any, legacyBehavior: PropTypes.bool, linkAs: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), locale: PropTypes.string, noLinkStyle: PropTypes.bool, prefetch: PropTypes.bool, replace: PropTypes.bool, role: PropTypes.string, scroll: PropTypes.bool, shallow: PropTypes.bool, }; export default Link;
// This optional code is used to register a service worker. // register() is not called by default. // This lets the app load faster on subsequent visits in production, and gives // it offline capabilities. However, it also means that developers (and users) // will only see deployed updates on subsequent visits to a page, after all the // existing tabs open on the page have been closed, since previously cached // resources are updated in the background. // To learn more about the benefits of this model and instructions on how to // opt-in, read https://bit.ly/CRA-PWA const isLocalhost = Boolean( window.location.hostname === 'localhost' || // [::1] is the IPv6 localhost address. window.location.hostname === '[::1]' || // 127.0.0.0/8 are considered localhost for IPv4. window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) ); export function register(config) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); if (publicUrl.origin !== window.location.origin) { // Our service worker won't work if PUBLIC_URL is on a different origin // from what our page is served on. This might happen if a CDN is used to // serve assets; see https://github.com/facebook/create-react-app/issues/2374 return; } window.addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; if (isLocalhost) { // This is running on localhost. Let's check if a service worker still exists or not. checkValidServiceWorker(swUrl, config); // Add some additional logging to localhost, pointing developers to the // service worker/PWA documentation. navigator.serviceWorker.ready.then(() => { console.log( 'This web app is being served cache-first by a service ' + 'worker. To learn more, visit https://bit.ly/CRA-PWA' ); }); } else { // Is not localhost. Just register service worker registerValidSW(swUrl, config); } }); } } function registerValidSW(swUrl, config) { navigator.serviceWorker .register(swUrl) .then(registration => { registration.onupdatefound = () => { const installingWorker = registration.installing; if (installingWorker == null) { return; } installingWorker.onstatechange = () => { if (installingWorker.state === 'installed') { if (navigator.serviceWorker.controller) { // At this point, the updated precached content has been fetched, // but the previous service worker will still serve the older // content until all client tabs are closed. console.log( 'New content is available and will be used when all ' + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' ); // Execute callback if (config && config.onUpdate) { config.onUpdate(registration); } } else { // At this point, everything has been precached. // It's the perfect time to display a // "Content is cached for offline use." message. console.log('Content is cached for offline use.'); // Execute callback if (config && config.onSuccess) { config.onSuccess(registration); } } } }; }; }) .catch(error => { console.error('Error during service worker registration:', error); }); } function checkValidServiceWorker(swUrl, config) { // Check if the service worker can be found. If it can't reload the page. fetch(swUrl, { headers: { 'Service-Worker': 'script' }, }) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. const contentType = response.headers.get('content-type'); if ( response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1) ) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { registration.unregister().then(() => { window.location.reload(); }); }); } else { // Service worker found. Proceed as normal. registerValidSW(swUrl, config); } }) .catch(() => { console.log( 'No internet connection found. App is running in offline mode.' ); }); } export function unregister() { if ('serviceWorker' in navigator) { navigator.serviceWorker.ready .then(registration => { registration.unregister(); }) .catch(error => { console.error(error.message); }); } }
import express from 'express'; import * as React from 'react'; import ReactDOMServer from 'react-dom/server'; import CssBaseline from '@mui/material/CssBaseline'; import { ThemeProvider } from '@mui/material/styles'; import { CacheProvider } from '@emotion/react'; import createEmotionServer from '@emotion/server/create-instance'; import createEmotionCache from './createEmotionCache'; import App from './App'; import theme from './theme'; function renderFullPage(html, css) { return ` My page ${css} ${html} `; } function handleRender(req, res) { const cache = createEmotionCache(); const { extractCriticalToChunks, constructStyleTagsFromChunks } = createEmotionServer(cache); // Render the component to a string. const html = ReactDOMServer.renderToString( {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} , ); // Grab the CSS from emotion const emotionChunks = extractCriticalToChunks(html); const emotionCss = constructStyleTagsFromChunks(emotionChunks); // Send the rendered page back to the client. res.send(renderFullPage(html, emotionCss)); } const app = express(); app.use('/build', express.static('build')); // This is fired every time the server-side receives a request. app.use(handleRender); const port = 3000; app.listen(port, () => { // eslint-disable-next-line no-console console.log(`Listening on ${port}`); });npm i @mui/lab
import { createTheme, ThemeOptions } from '@mui/material'
declare module '@mui/material' {
interface Color {
dark: string
main: string
light: string
}
}
const themeOptions: ThemeOptions = {
palette: {
grey: {
dark: '#777',
main: '#888',
light: '#999',
},
},
}
const theme = createTheme(themeOptions)
export default theme
npx create-react-app my-app --template typescript
npm install @mui/material @emotion/react @emotion/styled @types/material-ui
const Select: React.FC = ({ label, id, children, options, ...props }) => {
import Select from './Select'
import { styled } from '@mui/material'
import { ThemeProvider } from '@mui/material/styles'
import { ThemeProvider } from '@mui/styles'
import { ThemeProvider } from "@mui/material";
import { responsiveFontSizes, createTheme } from "@mui/material";
export const themeOptions: ThemeOptions = {
// ... any theme customiztion you can write here
}
let theme = responsiveFontSizes(createTheme(themeOptions));
{children}
yarn add @mui/icons-material # or npm i @mui/icons-material
Trending Discussions on User Interface
Trending Discussions on User Interface
QUESTION
script_a.py
from tkinter import *
from script_b import test
root = Tk()
var1 = stuff
var2 = stuff
def start_scriptb():
test([var1, var2])
Button(root, text="Start",
command=start_scriptb)
root.mainloop()
script_b.py
from tkinter import *
def test(x):
main = Tk()
Label(main, text=x)
Button(main, text="Exit", command=main.destroy())
main.mainloop()
This is a very basic version of what I'm trying to achieve. I actually am spawning a progress window that uses subprocess.Popen in script 2 with the passed through variables from script one and viewing the progess through a scrolled text widget on the 2nd program. I'm trying to spawn a new process, independent from the root GUI each time that button is hit from script_a.
It works fine in my tests so far, but I wanted to see if this could cause any issues or if this is actually spawning two processes?
I know there should only be one Tk() per process.
Using a TopLevel() window to show the progress works fine with the threading module, but the TopLevel() window will freeze as well as root (and any other open TopLevels()) if root is doing any sort of processing that takes any length of time.
ANSWER
Answered 2022-Apr-18 at 02:03With many hours of testing, I did have success in running two Tk() loops, but it had potential to be problematic, as "Bryan Oakley" had posted in many threads about.
Ultimately, I decided when I was in need of running something alone, I'd start my GUI with arguments and process it in an entirely new process instead of passing any arguments directly. Seems like a safer option.
QUESTION
ANSWER
Answered 2021-Sep-30 at 06:06If you want to stick to using a Plain button, try entering a thin space (U+2009) character as the title, which won't consume much space and solves the issue. (Thanks to @El Tomato for suggesting white space characters)
Here it is for easier copy-pasting:
QUESTION
[RESOLVED]
Both answers under question are right. There is a final redaction below in post.
I'm trying to create scrollable list of posts, but instead I got static non-scrollable block of strings, which is overflowing.
- Example:
- Overflowing:
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _writePost,
tooltip: 'Increment',
child: Icon(Icons.create, color: Colors.grey[300]),
),
body: SizedBox(
child: Container(
child: Column(children: [
StreamBuilder>(
initialData: const [],
stream: _socketStream.stream,
builder: (context, snapshot) {
if (_isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
}
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
...snapshot.data!.map(
(post) => Padding(
key: ValueKey(post.id),
padding: const EdgeInsets.symmetric(vertical: 10),
child: ListTile(
title: Text(
post.content,
style: const TextStyle(fontSize: 20),
),
trailing: MaterialButton(
onPressed: () {
_deletePost(post.id);
},
child: const Icon(
Icons.delete,
size: 30,
),
),
),
),
)
],
);
},
),
]))));
}
Edited code, which is scrolling
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _writePost,
tooltip: 'Increment',
child: Icon(Icons.create, color: Colors.grey[300]),
),
body: SizedBox(
height: 500,
child:
StreamBuilder>(
initialData: const [],
stream: _socketStream.stream,
builder: (context, snapshot) {
if (_isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
}
return Card(child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
...snapshot.data!.map(
(post) => Padding(
key: ValueKey(post.id),
padding: const EdgeInsets.symmetric(vertical: 10),
child: ListTile(
title: Text(
post.content,
style: const TextStyle(fontSize: 20),
),
trailing: MaterialButton(
onPressed: () {
_deletePost(post.id);
},
child: const Icon(
Icons.delete,
size: 30,
),
),
),
),
)
],
) );
},
),
));
}
I've tried to find error with documentation, but...
Please write if you need some more code or explanations.
ANSWER
Answered 2022-Mar-14 at 19:06@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: _writePost,
tooltip: 'Increment',
child: Icon(Icons.create, color: Colors.grey[300]),
),
body: SizedBox(
height: MediaQuery.of(context).height*0.8, // add this line
child:
// Container( // do not need this
// child: // and this do not need
// Column(children: [ // and this do not need
StreamBuilder>(
initialData: const [],
stream: _socketStream.stream,
builder: (context, snapshot) {
if (_isLoading) {
return const Center(
child: CircularProgressIndicator(),
);
}
ListView( // change this to ListView.builder for more performance
scrollDirection: Axis.vertical,
shrinkWrap: true,
children: [
...snapshot.data!.map(
(post) => Padding(
key: ValueKey(post.id),
padding: const EdgeInsets.symmetric(vertical: 10),
child: ListTile(
title: Text(
post.content,
style: const TextStyle(fontSize: 20),
),
trailing: MaterialButton(
onPressed: () {
_deletePost(post.id);
},
child: const Icon(
Icons.delete,
size: 30,
),
),
),
),
)
],
);## Heading ##
},
),
// ]) // comment this
// ). // and comment this
)
);
}
QUESTION
I am building a landing page that has a logo and then a sign in and login button below it. I used a box decoration to specify the background color because I am very particular about the gradient scheme. However, I realize it may have some kind of "absolute" effect on my container widget because I can't seem to change the colors of the buttons within the widget. I am new to flutter UI and I am probably layering the widgets incorrectly, but any help would be greatly appreciated! Here's the code for the landing page:
import 'package:flutter/material.dart';
import 'package:zefyr/common_widgets/cutom_elevated_button.dart';
class LandingPage extends StatelessWidget {
const LandingPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
gradient : LinearGradient(
begin: Alignment(0.1705881804227829,-0.7394942045211792),
end: Alignment(0.7395344376564026,0.7999715805053711),
colors: [Color.fromRGBO(212, 7, 248, 1),Color.fromRGBO(141, 6, 248, 1)]
),
image: DecorationImage(
image: AssetImage('assets/images/zefyr_logo.png'),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: const [
SizedBox(height: 450,),
CustomElevatedButton(
bgColor: Colors.white,
textColor: Colors.pinkAccent,
onPressed: null,
height: 62,
text: "Sign Up",
),
SizedBox(height: 12,),
CustomElevatedButton(
bgColor: Colors.white,
textColor: Colors.pinkAccent,
onPressed: null,
height: 62,
text: "Login",
)
]
),
);
}
}
Here's the code for the custom elevated button class:
import 'package:flutter/material.dart';
class CustomElevatedButton extends StatelessWidget {
const CustomElevatedButton({
this.height = 40.0,
required this.bgColor,
required this.textColor,
this.borderRadius = 30.0,
required this.onPressed,
required this.text,
this.textSize = 15.0,
});
final double height;
final Color bgColor;
final Color textColor;
final double borderRadius;
final VoidCallback? onPressed;
final String text;
final double textSize;
@override
Widget build(BuildContext context) {
//IMPORTANT: I originally did not wrap this in a SizedBox. I originally
//returned an ElevatedButton. But if you want to change the height of the
//button, the ElevatedButton widget does not have a height property.
//So, you wrap it in a SizedBox widget so you can adjust the height
return SizedBox(
height: height,
width: 162,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: bgColor,
onPrimary: textColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadius),
),
),
child: Text(
text,
style: TextStyle(
fontSize: textSize
),
),
onPressed: onPressed,
),
);
}
}
And here's what the page looks like currently. No matter what I do, I can't get the buttons to not match the background color. Any ideas on how to correct this behavior: Picture of landing page
ANSWER
Answered 2022-Mar-03 at 11:44Try this it will work. Change on pressed from null to this.....
CustomElevatedButton(
bgColor: Colors.white,
textColor: Colors.pinkAccent,
onPressed: (){
},
height: 62,
text: "Sign Up",
),
SizedBox(height: 12,),
CustomElevatedButton(
bgColor: Colors.white,
textColor: Colors.pinkAccent,
onPressed: (){
},
height: 62,
text: "Login",
)
QUESTION
On macOS Monetrey, when I move a child NSWindow to another screen (by manually dragging it), it disappears. Minimal repro using SwiftUI:
import SwiftUI
struct ContentView: View {
var body: some View {
Button("Hello World", action: openChild)
.padding(50)
}
func openChild() {
let win = NSWindow();
let parent = NSApp.mainWindow
parent?.addChildWindow(win, ordered: NSWindow.OrderingMode.above)
win.makeKeyAndOrderFront(self)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
(I know this may not be the "correct" SwiftUI way of doing things, it's just to demonstrate the problem in as little code as possible - this happens in low level Obj-C code in reality)
The interesting thing is if you:
- Show the child window
- Move it to another screen (it disappears)
- Select "Window -> Move to [Name of other screen]"
The child window reappears and can now be moved freely between screens.
From user reports I understand that this behavior doesn't occur on Big Sur.
I know there are applications that show child windows and allow them to be moved between screens, what is the correct incantation to allow this?
ANSWER
Answered 2022-Feb-27 at 16:17I do believe you just want to add a second NSWindow, or a NSPanel. Without a child window relation. In AppKit document-based apps you would for example overwrite -[NSDocument makeWindowControllers] and setup multiple window controllers for one document.
Child windows are for special use cases, for example: functionality like autocompletions lists, where you would want a chrome-less window with a table view beneath a textfield, which automatically follows the parent window when moved.
Here is TextEdit with such a autocompletions window and the Xcode Debug View Hierarchy of the same:
See this note from the documentation:
After the childWin is added as a child of the window, it is maintained in relative position indicated by place for subsequent ordering operations involving either window. While this attachment is active, moving childWin will not cause the window to move (as in sliding a drawer in or out), but moving the window will cause childWin to move.
I don't believe that a child window was ever intended to be independently moved from its parent window, especially different screens.
QUESTION
What I want to do is to open a new Countrypage sub-window by clicking on the "New" button which is in Countrypage itself.
For example, if I click the "New" button in a CountryPage window (window title: "Country page"), one more new Countrypage window will be opened in the MDI area (window title: "Country Page 1"). Now if we click the "New" button in "Country Page 1", one more new window will open in the MDI area (window title: "Country page 2") and so on - and I want to close the windows one by one by pressing the corresponding "Close" button in Countrypage. New window are opened only by pressing a "New" button.
And if we close the last opened window by pressing the "Close" button, the text item in the "Country" text-box will be automatically updated in the previous window's "Country" text-box and so on.
Main Script :
import sys,os
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from sample_countrypage import Countrypage
class MainPage(QMainWindow):
count = 0
def __init__(self):
super().__init__()
self.mdi = QMdiArea()
self.mdi.setFixedSize(1000,400)
self.mdi.setHorizontalScrollBarPolicy(Qt.ScrollBarAsNeeded)
self.mdi.setVerticalScrollBarPolicy(Qt.ScrollBarAsNeeded)
self.setWindowTitle(" Sample Programme")
self.setGeometry(100,100,1600,600)
self.Ui()
self.show()
def Ui(self):
self.btn1=QPushButton("Country")
self.btn1.setFixedSize(100, 30)
self.btn1.clicked.connect(self.countrypage)
self.left_layout = QVBoxLayout()
self.right_layout = QHBoxLayout()
self.main_layout = QHBoxLayout()
self.left_layout.setContentsMargins(3,5,5,3)
self.left_layout.addWidget(self.btn1)
self.left_layout.addStretch()
self.right_layout.addWidget(self.mdi)
self.main_layout.setSpacing(5)
self.main_layout.setContentsMargins(0,0,0,0)
self.main_layout.addLayout(self.left_layout)
self.main_layout.addLayout(self.right_layout)
self.main_layout.addStretch()
widget = QWidget()
widget.setLayout(self.main_layout)
self.setCentralWidget(widget)
self.subwindow1 = QMdiSubWindow()
self.subwindow1.setObjectName("SubWindow_1")
# self.subwindow1.setWindowFlag(Qt.FramelessWindowHint)
print(Countrypage.btn2click)
def countrypage(self):
self.countrywindow = Countrypage()
self.subwindow1.setWidget(self.countrywindow)
self.subwindow1.setWindowTitle("Create Country")
self.subwindow1.setFixedWidth(300)
self.mdi.addSubWindow(self.subwindow1)
self.subwindow1.show()
self.mdi.cascadeSubWindows()
self.countrywindow.closeRequsted.connect(self.subwindow1close)
def subwindow1close(self):
print("close activated from mdi programme")
self.subwindow1.close()
if __name__ == "__main__":
app = QApplication(sys.argv)
mainwindow = MainPage()
app.setStyle("Windows")
mainwindow.show()
sys.exit(app.exec_())
Countrypage.py
import sys,os
from PyQt5.QtWidgets import QWidget,QApplication,QPushButton,QLineEdit,QFormLayout,QVBoxLayout,QHBoxLayout
from PyQt5.QtCore import pyqtSignal
class Countrypage(QWidget):
closeRequsted = pyqtSignal()
def __init__(self):
super().__init__()
self.btn1 = QPushButton("close")
self.btn2 = QPushButton("New")
self.btn1.clicked.connect(self.result)
self.btn2.clicked.connect(self.btn2click)
self.tb_country = QLineEdit()
self.tb_continent =QLineEdit()
self.form_layout = QFormLayout()
self.form_layout.addRow("Country",self.tb_country)
self.form_layout.addRow("continent",self.tb_continent)
self.form_layout.addRow("",self.btn2)
self.form_layout.addRow("",self.btn1)
self.setLayout(self.form_layout)
def result(self):
self.closeRequsted.emit()
def btn2click(self):
btn2text = (self.btn2.text())
print(btn2text)
if __name__=="__main__":
app = QApplication(sys.argv)
countrywin = Countrypage()
countrywin.show()
sys.exit(app.exec_())
ANSWER
Answered 2022-Feb-14 at 18:38The adding and closing of sub-windows is best handled by the main-window. The CountryPage class doesn't need to know anything about the sub-windows. The new/close buttons can be directly connected to methods of the main-window. This makes it easier to manage the sub-windows via the functions of the mdi-area.
Below is a re-write of your example which should do what you asked for:
Main Script:
import sys, os
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
class MainPage(QMainWindow):
def __init__(self):
super().__init__()
self.mdi = QMdiArea()
self.mdi.setFixedSize(1000, 400)
self.mdi.setHorizontalScrollBarPolicy(Qt.ScrollBarAsNeeded)
self.mdi.setVerticalScrollBarPolicy(Qt.ScrollBarAsNeeded)
self.setWindowTitle("Sample Programme")
self.setGeometry(100, 100, 1600, 600)
self.Ui()
def Ui(self):
self.btn1 = QPushButton("Country")
self.btn1.setFixedSize(100, 30)
self.btn1.clicked.connect(self.countrypage)
self.left_layout = QVBoxLayout()
self.right_layout = QHBoxLayout()
self.main_layout = QHBoxLayout()
self.left_layout.setContentsMargins(3, 5, 5, 3)
self.left_layout.addWidget(self.btn1)
self.left_layout.addStretch()
self.right_layout.addWidget(self.mdi)
self.main_layout.setSpacing(5)
self.main_layout.setContentsMargins(0, 0, 0, 0)
self.main_layout.addLayout(self.left_layout)
self.main_layout.addLayout(self.right_layout)
self.main_layout.addStretch()
widget = QWidget()
widget.setLayout(self.main_layout)
self.setCentralWidget(widget)
def countrypage(self):
page = Countrypage()
subwindow = self.mdi.addSubWindow(page)
subwindow.setWindowTitle("Create Country")
subwindow.setFixedWidth(300)
page.btn_close.clicked.connect(self.subwindowclose)
page.btn_new.clicked.connect(self.countrypage)
subwindow.show()
self.mdi.cascadeSubWindows()
def subwindowclose(self):
print("close activated from mdi programme")
current = self.mdi.activeSubWindow()
if current is not None:
self.mdi.activatePreviousSubWindow()
previous = self.mdi.activeSubWindow()
if previous is not None:
previous.widget().update_fields(current.widget())
current.close()
if __name__ == "__main__":
app = QApplication(sys.argv)
mainwindow = MainPage()
app.setStyle("Windows")
mainwindow.show()
sys.exit(app.exec_())
Countrypage.py:
import sys,os
from PyQt5.QtWidgets import QWidget,QApplication,QPushButton,QLineEdit,QFormLayout,QVBoxLayout,QHBoxLayout
from PyQt5.QtCore import pyqtSignal
class Countrypage(QWidget):
def __init__(self):
super().__init__()
self.btn_close = QPushButton("Close")
self.btn_new = QPushButton("New")
self.tb_country = QLineEdit()
self.tb_continent = QLineEdit()
self.form_layout = QFormLayout()
self.form_layout.addRow("Country", self.tb_country)
self.form_layout.addRow("Continent", self.tb_continent)
self.form_layout.addRow("", self.btn_close)
self.form_layout.addRow("", self.btn_new)
self.setLayout(self.form_layout)
def update_fields(self, other):
if isinstance(other, Countrypage):
self.tb_country.setText(other.tb_country.text())
self.tb_continent.setText(other.tb_continent.text())
else:
raise TypeError('invalid page type')
QUESTION
In angular,
This is script
Greet
Greet
{{greeting}}
This is event Logic
public greeting ="";
onClick(event) {
console.log(event);
this.greeting ='welcome';
}
ANSWER
Answered 2021-Dec-30 at 01:04Some alternatives you can use:
onClick(event: Event) {}
onClick(event: MouseEvent) {}
Also, if you are not using the parameter event for anything, you can remove it.
onClick() { ... }
QUESTION
I'm working on a cross-platform project in C++ generating the UI dynamically, and I am struggling with C++/winRT UWP NavigationView on two problems:
- When defining a NavigationViewItemHeader, the resulting header title doesn't show in the navigation menu, the space remains empty,
- When trying to update the SettingsItem of the navigation menu, the value of the Settings navigation item is nullptr as returned by SettingsItem().
Here is the code I wrote for generating the menu from a list of items managed independently from the host (e.g. Windows):
bool
CANavigationView::UpdateHostView( void )
{
TNavigationItemPtr item;
TIndex index;
if( _hostViewUpdateNeeded == false )
return false;
Windows::UI::Xaml::Controls::NavigationViewItemBase hItem( nullptr );
Windows::UI::Xaml::Controls::TextBlock hText( nullptr );
winrt::hstring hTag;
// Remove all navigation items from the current host view:
_hostNavigationView.MenuItems().Clear();
_hostNavigationView.IsSettingsVisible( false );
// Build the navigation menu items:
for( index = 0; index < _navigationItems.CountOfItems(); index++ )
{
item = * _navigationItems.GetItemAtIndex( index );
if( item->identifier == kSettingsItem )
{
_hostNavigationView.IsSettingsVisible( true );
hText = Windows::UI::Xaml::Controls::TextBlock();
CSString::ConvertToUIString( item->title->GetString( gAppLanguageCode ), & hTag );
hText.Text( hTag );
// Issue #1 : cannot access to the Settings item
// _hostNavigationView.SettingsItem().as< Windows::UI::Xaml::Controls::NavigationViewItem >().Content( hText );
// SettingsItem() returns nullptr...
}
else
{
switch( item->type )
{
case eNavigationHeader:
hItem = Windows::UI::Xaml::Controls::NavigationViewItemHeader();
hText = Windows::UI::Xaml::Controls::TextBlock();
CSString::ConvertToUIString( item->title->GetString( gAppLanguageCode ), & hTag );
hText.Text( hTag );
// Issue #2: The header's title is not displayed
hItem.Content( hText );
_hostNavigationView.MenuItems().Append( hItem );
break;
case eNavigationSeparator:
hItem = Windows::UI::Xaml::Controls::NavigationViewItemSeparator();
_hostNavigationView.MenuItems().Append( hItem );
break;
case eNavigationItem:
hItem = Windows::UI::Xaml::Controls::NavigationViewItem();
CSString::ConvertToUIString( CAUIElement::GetStringFromUIIdentifier( item->identifier ), & hTag );
hItem.Tag( winrt::box_value( hTag ) );
hText = Windows::UI::Xaml::Controls::TextBlock();
CSString::ConvertToUIString( item->title->GetString( gAppLanguageCode ), & hTag );
hText.Text( hTag );
hItem.Content( hText );
hItem.as< Windows::UI::Xaml::Controls::NavigationViewItem>().Icon( GetHostIcon( item->icon ) );
_hostNavigationView.MenuItems().Append( hItem );
break;
default:
break;
}
}
}
_hostViewUpdateNeeded = false;
return true;
}
As I'm using my own string format (I'm stuck in old C++ standards...) and I18N support, I need to first convert the UTF8 string to the host (here Windows) before setting the value of the text block, using the hTag variable of type hstring. In debugging mode, the text is well transcoded in the hstring format...
What is puzzling me is the fact that both NavigationSeparator and NavigationItem cases are working fine, in line with the official Microsoft documentation (including the Tag for menu event handling and Icon setting for NavigationViewItem).
I understand this is not the "mainstream XAML way" of working on UWP user interface but so far the approach is working well on other UI elements.
Here is a screenshot of the navigation view with the empty spaces for the headers:
Also, in the example above, I logged the number of menu items in the host navigation view (_hostNavigationView.MenuItems().Size()) and got 7 as a result, which is correct...
At last, here's the detailed log I'm generating in DEBUG mode:
DBG-[000002686A230710]CANavigationView::UpdateDisplayedLanguage() {
DBG-[000002686A230710]CANavigationView::UpdateHostView() {
DBG-[000002686A230710]CANavigationView::UpdateHostView() Navigation item 0, type 2
DBG-[000002686A230710]CANavigationView::UpdateHostView() Header case: Reference Library
DBG-[000002686A230710]CANavigationView::UpdateHostView() Navigation item 1, type 1
DBG-[000002686A230710]CANavigationView::UpdateHostView() Navigation item case
DBG-[000002686A230710]CANavigationView::UpdateHostView() Navigation item 2, type 1
DBG-[000002686A230710]CANavigationView::UpdateHostView() Navigation item case
DBG-[000002686A230710]CANavigationView::UpdateHostView() Navigation item 3, type 1
DBG-[000002686A230710]CANavigationView::UpdateHostView() Navigation item case
DBG-[000002686A230710]CANavigationView::UpdateHostView() Navigation item 4, type 3
DBG-[000002686A230710]CANavigationView::UpdateHostView() Separator case
DBG-[000002686A230710]CANavigationView::UpdateHostView() Navigation item 5, type 2
DBG-[000002686A230710]CANavigationView::UpdateHostView() Header case: Project Library
DBG-[000002686A230710]CANavigationView::UpdateHostView() Navigation item 6, type 1
DBG-[000002686A230710]CANavigationView::UpdateHostView() Navigation item case
DBG-[000002686A230710]CANavigationView::UpdateHostView() Navigation item 7, type 1
DBG-[000002686A230710]CANavigationView::UpdateHostView() Settings case
DBG-[000002686A230710]CANavigationView::UpdateHostView() Value of SettingsItem(): 0000000000000000
DBG-[000002686A230710]CANavigationView::UpdateHostView() Count of menu items for the navigation view: 7 (8)
DBG-}
DBG-}
Your help in solving those two issues would be greatly appreciated !
Best regards,
Arnaud
ANSWER
Answered 2022-Feb-02 at 11:34Dynamic Headers/Footers enable different grouping options in reports, such as "By Location" or "By Location By System": Note that the words "Report Definitions" are circled above. Although reports can have up to three Dynamic Headers/Footers, some reports only have one or two Dynamic Groups.
QUESTION
While exploring TextField in a Jetpack Compose, I came across a case where I have to modify input typed in the field. For example, adding a comma after entering 3 characters.
This is how I made it.
@Composable
fun TFDemo() {
var fieldValue by remember { mutableStateOf(TextFieldValue("")) }
TextField(
value = fieldValue,
onValueChange = {
val newMessage = it.text.let { text -> if (text.length == 3) "$text," else text }
fieldValue = it.copy(newMessage, selection = TextRange(newMessage.length))
},
keyboardOptions = KeyboardOptions(autoCorrect = false),
)
}
But after running it, I realized that after the comma is added, keyboard view changed back to alphabets from numbers/symbols which should not be the case. See video output below for clarity
As you can see in the below video when I typed "111" comma was appended and suddenly keyboard's numeric view changed to alphabets again.
Here I have modified the selection of TextFieldValue so that cursor always be at the end of the message whenever a comma is appended.
ANSWER
Answered 2021-Dec-18 at 11:45This kind of cases is exactly what VisualTransformation is intended for.
Here's a Googler's comment on another issue:
I don't think we can fix this issue easily.
The filtering text in onValueChanged callback is generally not recommended because the text state is shared with out process IME(software keyboard). The filtering text means the text content changes internally, then the new state is notified to IME. This is not a normal path to IME and different IME reacts differently to this unexpected state change. Some IME may try to reconstruct the composition, others may give up and start new session, etc. This is mostly due of the historical reason and hard to fix from now. So, please avoid filtering text in onValueChanged callback and consider following alternatives:
- (Recommended) Don't filter it and show error message. (irrelevant here)
- Use VisualTransformation for changing visual output without modifying edit buffer.
QUESTION
I am trying to model credit card data in JavaFx using a GridPane:
My model contains 3 rows (Note: each field is comprised of label + text field):
Row 1: First name and last name (4 fields)
Row 2: Credit card number (2 fields)
Row 3: Expiration date - month, year + CVV (6 fields)
See screenshot below:
I was reading this tutorial which states:
All cells in the same row will have the same height, and all cells in the same column will have the same width. Different rows can have different heights and different columns can have different widths.
Are there any workarounds to to have different size columns on a row by row basis in a GridPane?
ANSWER
Answered 2021-Nov-24 at 00:54For the specific layout in the image, I would use a VBox with HBox for rows:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Priority;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
public class App extends Application {
@Override
public void start(Stage stage) {
Label lblFirst = new Label("First");
Label lblLast = new Label("Last");
Label lblNumber = new Label("Card Number");
Label lblMonth = new Label("Month");
Label lblYear = new Label("Year");
Label lblCVV = new Label("CVV");
TextField txtFirst = new TextField();
TextField txtLast = new TextField();
TextField txtNumber = new TextField();
TextField txtMonth = new TextField();
TextField txtYear = new TextField();
TextField txtCVV = new TextField();
HBox row1 = new HBox(10);
HBox row2 = new HBox(10);
HBox row3 = new HBox(10);
row1.getChildren().add(createCell(lblFirst, txtFirst));
row1.getChildren().add(createCell(lblLast, txtLast));
row2.getChildren().add(createCell(lblNumber, txtNumber));
row3.getChildren().add(createCell(lblMonth, txtMonth));
row3.getChildren().add(createCell(lblYear, txtYear));
row3.getChildren().add(createCell(lblCVV, txtCVV));
VBox rows = new VBox(10, row1, row2, row3);
StackPane.setMargin(rows, new Insets(10));
StackPane root = new StackPane(rows);
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
private static HBox createCell(Label label, TextField text) {
HBox pane = new HBox(5, label, text);
label.setMinWidth(Pane.USE_PREF_SIZE);
text.setMinWidth(50);
pane.setAlignment(Pos.CENTER);
HBox.setHgrow(pane, Priority.ALWAYS);
HBox.setHgrow(text, Priority.ALWAYS);
return pane;
}
public static void main(String[] args) {
launch();
}
}
Output:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install material-ui
v4.x (Migration from v4 to v5)
v3.x (Migration from v3 to v4)
v0.x (Migration to v1)
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page
