Hello I have tried to adjust my QML app for mobile screens. I have main screen which consists of Tabs in TabView :
import QtQuick 2.5
import QtQuick.Window 2.1
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.4
TabView {
Tab{
id: Tab1
component: Qt.createComponent("qrc:///LoginScreen.qml")}
Tab{
id: Tab1
component: Qt.createComponent("qrc:///AfterLogged.qml")}}`
In LoginScreen.qml in which I have Buttons, Labels, TextFields to get data:
import QtQuick 2.5
import QtQuick.Window 2.1
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.4
Item {
Label {
id: ipAddressLabel
text: qsTr("Address IP:")
TextField {
id: ipTextField
placeholderText: qsTr("Insert IP address")
Button {
id: loginBtn
onClicked: {
connectToApp(ipTextField.text)}}
}
How could I resize my app screen on the basis of the specific mobile screen resolution/density?
Just have a look at the Screen type.
It contains the current height and width of your screen which can be assigned to your LoginScreen.qml width and height properties:
Item {
width: Screen.width
height: Screen.height
//[...]
}
Please note if you want to use anchors with margins you have to go a step deeper and calculate the margins correctly.
Related
From design team I received a kind of system / setup for typography in my React app:
// these differ in font size and line height
Header 1
Header 2
Header 3
// these differ in font size and line height and can be regular or bold
Title 1 (which can be regular or bold)
Title 2 (which can be regular or bold)
Title 3 (which can be regular or bold)
Body
Body Italic
Body Bold
Body Underlined
Button
Button Bold
// and so on...
I am using Typescript and Emotion for the theme and styling. Currently I use my theme like:
export const colors: Colors = {
transparent: 'transparent',
black: '#000',
white: '#fff',
// etc...
};
const theme = () => ({
colors,
spaces,
widths,
heights,
fonts,
fontSizes,
fontWeights,
lineHeights,
// etc
});
export default theme;
I am thinking about adding some reusable component(s) which I can use like:
import { Header } from 'app/components/typography'
// In JXS use like:
<Header variant={1} />
Or something like:
import { Typography } from 'app/components/typography'
// In JXS use like:
<Typography.Header variant={1} />
Then above components will return correct font size, line height etc.
What is your opinion? Is is there a more convenient / better way to accomplish this?
So, here is what I currently have:
And I need distance between icons to be equal. That's what I'm unable to do using tabStyle prop like this:
tabStyle: {
width: whatever
}
cause distance is not equal. How can I do so in React Navigation 5?
I assume you want the labels to be as wide as the content instead of stretching to available width. In that case, you need to set width to auto:
tabStyle: {
width: 'auto'
}
Am using Nav from office-ui-fabric-react and rendering a Nav bar with icons like here https://learn.microsoft.com/en-us/javascript/api/office-ui-fabric-react/inavlink?view=office-ui-fabric-react-latest#icon. My requirement is to render some custom icon in the Nav bar. The icon property expects a string and am only able to use the icons from here https://uifabricicons.azurewebsites.net/ with thier friendly names,
//Doesn't render icon
{
name: "App details",
url: "http://msn.com",
key: "key1",
target: "_blank"
icon : "SomeURL"(Some custom icon from the project)
}
//renders icon
{
name: "App details",
url: "http://msn.com",
key: "key1",
target: "_blank"
icon : "Documentation"(Any Friendly Name from above list of icons)
}
Requirement : Need to display an icon which is not part of list here https://uifabricicons.azurewebsites.net/
You can try customize how your link looks like using the onRenderLink method
https://developer.microsoft.com/en-us/fluentui#/controls/web/nav
I'm trying to add some icons to the header as buttons, I've tried using both bootstrap and fontawesome as mentioned in the docs but I get an empty square instead of the icon. When using the bootstrap theme I get 'undefined', when using the standard I get the below.
Here's my code:
const customButtons = {
custom1: {
icon: "fa-times",
click: function() {
alert('test');
}
}
}
<CustomCalendar
customCalendarRef={customCalendarRef}
select={(e: any) => processClick(e)}
customButtons={customButtons}
themeSystem="standard"
header={{
right: '',
center: '',
left: 'prev,next today custom1'
}}
/>
Result:
How can I show an icon as a button in the header?
I'm also using fullcalendar in my react app so I've tried using your code. First there's one thing you forgot, wich is fontawesome icons also needs the "fa" class, so the correct would be fa fa-times, not only fa-times.
But then there's another issue which is the icon comes with custom fullcalendar classes when rendered:
So a solution you might use is to add this to your css somewhere:
.fc-icon.fa {
font: normal normal normal 14px/1 FontAwesome !important;
}
It worked for me:
Edited:
The string of the fontawesome classes should start with a blank space otherwise the 'fa' class will concatenate with the fullcalendar class. So: icon: ' fa fa-times'
My nav items need to have colour and icon changes.
I'm finding however that the set of icons I seem to have and the iconClassName do not seem to be being shown
{
key: 'upload',
name: 'MAU',
icon: 'AlertSolid',
iconClassName: 'bg-90',
onClick: () => { return; },
['data-automation-id']: 'uploadNonFocusButton'
}
It appears that there is a limited set of icons supported within the Nav and CommandBar. Is this correct? I'm also surprised that the iconClassName is not being picked up.