I need define some style for different QML controls. Now i have following options:
Define style for each control like:
TextField {
text: "Text input"
style: TextFieldStyle {
textColor: "white"
...
}
}
Define style in each qml file using it like:
Component {
id: myStyle
TextFieldStyle {
textColor: "white"
...
}
}
TextField {
text: "Text input"
style: myStyle
}
Question: how to implement single qml file containing all styles for all used controls which can be reused in every qml file of project?
Which top level element should be in such qml?
As i understand each qml file in project is Component. But if i specify top element as Component, then it will create component in Component, right?
What is best way to implement that?
There are three things to do:
Create a single qml file MyStyles.qml containing all colours, text sizes
Create simple, re-usable components(e.g. MyLabelText.qml, MyTextInput.qml). Use the style values defined previously.
Build your higher level components based in this components (e.g. MyLabeledInputField.qml)
Related
I want to give my dropdown items to use the text themeColor. How can I achieve this? Below is my code:
const dropdownStyles: Partial<IDropdownStyles> = {
dropdown: { width: "50%" },
dropdownItem: {
backgroundColor:"$themePrimary",
color:"$ms-color-themePrimary"
}
};
<Dropdown label='Select your List' styles={ dropdownStyles} placeholder='---Select an Option---' options={this.state.listNames}></Dropdown>
The above does not work. The dropdown items dont use the Primary color which is #a200ff.
As far as I know the "$ms-Bla--bla-bla" notation is only working for (statically) pre-processed fabric-ui files, there is no run-time processing of these variables in spfx. So, you may need to use the theme directly. For example, you could make your dropdownStyles a function instead of a constant. You receive the current theme in parameters then:
const dropdownStyles = (styleProps: IDropdownStyleProps): Partial<IDropdownStyles> => {
return {
dropdown: { width: "50%" },
dropdownItem: {
backgroundColor: styleProps.theme.palette.themePrimary,
color: styleProps.theme.palette.themePrimary
}
}
};
There are other options as well, like using <ThemeProvider> / useTheme pair for example, using "magic" scss rules like [theme: themePrimary, default: #0078d7] (which are pre-processed at runtime) , using window.__themeState__.theme variable
I was able to successfully implement the Mapael map into my HTML page, and was able to configure the hover fill color to my liking via the JavaScript code.
I'm trying to change the fill color of specific individual countries.
I've worked briefly with SVGs before, and I used to open up a file with a text editor and update certain elements that way. Is there a different way to do this?
I was wondering if this is possible with Mapael?
and Where does one grab the SVG file from?
I downloaded and deploy the repository version (jQuery-Mapael-2.2.0).
See screenshot of the files and folders.
svg code file
You have to use Mapael special function/params:
$(function () {
$("yourMapElementSelector").mapael({
// Customize some areas of the map
areas: {
"US": {
attrs: {
fill: "#488402"
}
, attrsHover: {
fill: "#a4e100"
}
}
},
});
});
I am not sure how Mapael works, but normally what I would do with the SVG is add IDs to each country, something like:
<g id="france">
or
<path id="france">
Or whatever shapes you use and then just define a CSS class similar to this:
/* if the paths are inside a group */
.svgactive path {
fill: red;
}
/* if the paths are standalone */
path.svgactive {
fill: red;
}
And just toggle the class .svgactive on your specific id inside the SVG file.
I am using Infragistics igxGridComponent. I am trying to style the look of selected rows.
I have tried setting my own css classes:
.selected-row {
background-clor:red;
color:white;
font:bold;
}
However, I am not really sure how to apply them conditionally. Should I be using ngClass or there is another syntax to this?
You can use the igx-grid-theme SASS function to create a custom theme:
$custom-theme: igx-grid-theme(
$row-selected-background: green,
$row-selected-text-color: #000,
$row-selected-hover-background: red
);
And then pass it to the igx-grid SASS mixin:
::ng-deep {
#include igx-grid($custom-theme);
}
Here you can find an example.
I am using React-Admin and I need to use/create a component for cropping an image (profile image) and storing it as a base64-image.
I found #toast-ui/react-image-editor better than other libraries but I have a problem with that. In React-Admin when we use ImageInput like this:
<ImageInput multiple label="Gallery" source="gallery" accept="image/*">
<ImageField source="src" title="title" />
</ImageInput>
the data can be loaded from the source (in Edit mode) and it will be stored there, but when we use other components like what I have mentioned, I need to know how can I pass the data as a source to that. It doesn't matter for me to use this library or any others... but I need one with simple usage.
Actually, my issue is with connecting the new component to the model that react-admin use.
I have recently written such a component, you can find it under the following link:
EditableImageComponent.
I don't use #toast-ui/react-image-editor for this, like you do, but ReactImageCrop, maybe the component will help you anyway. At the moment I have some bugs in the code (after the image is loaded, the crop has to be changed once before it is applied), but otherwise it works quite well so far.
Edit: In order to use this component in your EditView, simply call it like every other Input Component (it is assumed, that your target is called "imagename")
<EditableImage source="imagename" {...props} label="User image (Use the upload button to edit)"/>
I have use #toast-ui/react-image-editor as my image editor. i use modal to edit images in gallery. My simple code using react and bootstrap.
first import react image editor.
import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '#toast-ui/react-image-editor';
if you use class component add this line.
export default class Example extends Component {
editorRef = React.createRef();
}
or if you use funtional component add this line.
function Example() {
const editorRef = React.createRef();
}
then call react image editor in the component.
<ImageEditor
ref={this.editorRef}
includeUI={{
loadImage: {
path: imagePath,
name: imageName,
},
theme: myTheme,
menu: [
"filter",
"crop",
"flip",
"resize",
"rotate",
"text",
],
initMenu: "filter",
uiSize: {
width: "100%",
height: "600px",
},
menuBarPosition: "left",
}}
cssMaxHeight={500}
cssMaxWidth={700}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70,
}}
usageStatistics={false}
/>
Is it possible to add a before element in CSS like this:
ul {
li:before {
content: url('../icons/fancy-symbol.svg');
}
}
and have access to the svg's objects (e.g. a specific line or rectangle) and properties (e.g. the stroke-width, strike and fill color)?
Or is there a workaround for these kind of situations?
The use case is to color some lines on hover and animate the svg on click.
You can specify a fragment on the SVG URL, like ../icons/fancy-symbol.svg#red, then have CSS inside the file react to that:
<style>
#red:target ~ .some-element-here {
fill: red;
}
</style>
This won't let you specify properties dynamically, but it can be useful for interaction states, especially with a preprocessor.
Alternatively, if the SVG file is small enough, you can use preprocessors to change properties in a Data URI, like with sass-svg, or manually:
.li:before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
fill='#{$color}'%3E...");
}
(By the way, it might be easier to use ul { list-style-image: url(...) } instead of pseudo-elements.)