I am reading through the docs for UI Fabric React, and I can see that we have these classes to apply font sizes to our labels: https://learn.microsoft.com/en-us/office/dev/add-ins/design/add-in-typography .. I liked the size of the "Subtitle" and "Body" as a header, however the subtitle that is supposed to be a header appears in grey color and the body which is supposed to be the sub label appears to be black. How do we change the default colors when doing something like this:
<Label className="ms-font-l">Hello World</Label>
You can change Label color through Theme or Styles prop:
Theme:
import { createTheme } from 'office-ui-fabric-react'
const labelTheme = createTheme({
palette: {
neutralPrimary: '#f00',
},
})
<Label theme={labelTheme} className="ms-font-l">Hello World</Label>
Styles:
const labelStyles = { root: { color: '#f00' } };
<Label styles={labelStyles} className="ms-font-l">Hello World</Label>
Codepen working example
Addition:
If you want to apply styles on ms-font-l use selectors prop:
const labelStyles = {
root: {
selectors: {
'.ms-font-l': { color: '#f00' },
},
},
};
<Label styles={labelStyles} className="ms-font-l">Hello World</Label>
Component styling Wiki
Related
I cannot find a way to change the style the IconButton of the status: 'error' Toast component in native base v3, which under the hood is using an IconButton component.
Here is the link to the main Toast functions such as useToast and their props
The simplified code to render a toast looks like the following:
import { useToast } from 'native-base';
...
const Toast = useToast():
...
Toast.show({
title: 'title',
status: 'error',
style: { backgroundColor: 'blue.200' },
})
But how would I increase the padding of the close icon button for example? It would be nice to do something like
I understand I can use the render prop to render a custom component, but I would prefer to use the default styling from native base and my extended theme - instead of having to style and render a component that looks exactly the same as the current Toast. This poses an issue if there are default style changes from native base or the app's extended theme, as changes would have to be hardcoded and changed in this render fn as well. Which is not practical!
Toast.show({
style: {
_icon: {
padding: 10,
},
}
// or
iconButtonStyle: { padding: 10 },
})
I can extend the theme and set a default style for IconButton component like so, but this would change every single IconButton in the app - which is not practical.
const myTheme = extendTheme({
components: {
IconButton: {
baseStyle: {
rounded: 'full',
padding: 10,
},
},
...
Is it possible to change the base styles like so?
const myTheme = extendTheme({
components: {
Toast: {
baseStyle: {
_icon: {
padding: 10,
},
},
},
...
It would be great to know how to change the styling of either:
the icon button of one specific Toast component (like in toast.show() above)
or the default styling for the close icon button of all Toast's, but not other IconButtons
Thanks!
I am currently building an VUE application. There I need to customize the primary color in litepie-datepicker to #A7F3D0(emerald series) in my tailwind.config.js file.
I tried theses codes. But nothing is working
'litepie-primary':'#A7F3D0', // color system for light mode
'litepie-secondary': colors.coolGray // color system for dark mode
'litepie-primary': colors.emerald[200], // color system for light mode
'litepie-secondary': colors.coolGray // color system for dark mode
This is my tailwind.config.js file
const path = require('path');
const colors = require('tailwindcss/colors');
module.exports = {
purge: [
"./src/**/*.php",
"./src/**/*.html",
"./src/**/*.vue",
"./resources/**/*.php",
"./resources/**/*.html",
"./node_modules/#left4code/tw-starter/**/*.js",
path.resolve(__dirname, './node_modules/litepie-datepicker/**/*.js')
],
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {
width: {
'1/7': '14.2857143%',
},
colors: {
'primary': '#00a69c',
'secondary': '#343a40',
'litepie-primary': colors.emerald, // color system for light mode
'litepie-secondary': colors.coolGray // color system for dark mode
}
},
},
variants: {
extend: {
cursor: ['disabled'],
textOpacity: ['disabled'],
textColor: ['disabled']
},
},
plugins: [],
}
I search questions already on StackOverflow but didn't find a satisfying answer. I hope someone answers this.
Thank you in advance.
Litepie Datepicker already set litepie-primary as emerald. You can check it on their Github repository
// lines 20, 21
'litepie-primary': colors.emerald,
'litepie-secondary': colors.coolGray
As a primary color (color of selected date) they are using litepie.primary[500] which is rgb(16, 185, 129). My guess you need to change this color. I will show only relevant to colors part of your config
const colors = require('tailwindcss/colors');
// Change '500' key. To make it noticeable I'll change it to red
colors.emerald[500] = 'red';
module.exports = {
...
theme: {
extend: {
colors: {
'litepie-primary': colors.emerald
}
}
}
...
}
Let's check
<div class="text-litepie-primary-50">50</div>
<div class="text-litepie-primary-100">100</div>
<div class="text-litepie-primary-200">200</div>
<div class="text-litepie-primary-300">300</div>
<div class="text-litepie-primary-400">400</div>
<div class="text-litepie-primary-500">500 This should be red</div>
<div class="text-litepie-primary-600">600</div>
<div class="text-litepie-primary-700">700</div>
<div class="text-litepie-primary-800">800</div>
<div class="text-litepie-primary-900">900</div>
To make it #A7F3D0 you can pass it directly as a string or by default color
// colors.emerald[500] = '#A7F3D0';
colors.emerald[500] = colors.emerald[200];
Alternatively if you wish to change whole pallete to your customs provide object with Tailwind's keys
module.exports = {
theme: {
extend: {
colors: {
'litepie-primary': {
50: '#color50',
100: '#color100',
...
900: '#color900'
}
}
}
}
}
I am currently trying to re-style a Fabric UI Button in React by changing its shape, background color and hovering color. I managed to change the first two, but i'm still having troubles in accessing the hover color, since the selectors property does not seem to work.
My code is the following:
import React, { Component, Props } from 'react';
import { PrimaryButton as FluentPrimaryButton, IButtonStyles, IStyle} from 'office-ui-fabric-react';
interface MyPrimaryButtonProps {
label?: string
}
const MyPrimaryButton = ({label}: MyPrimaryButtonProps) => {
const styles: IButtonStyles = {
root: [
{
fontSize: '16px',
background: '#525CA3 ',
border: '1px solid #525CA3',
borderRadius: '20px',
padding: '0px 30px',
height: '40px',
selectors: { // <---
':hover': { // <--- this part doesn't work.
backgroundColor: 'red' // <---
},
}
}
]
};
return (
<div>
<FluentPrimaryButton styles={styles} text={label} />
</div>
);
};
export default MyPrimaryButton;
I get a custom button, but still the hover color remains default blue, instead of switching to red.
You can change the styling of the button when hovered like this:
const btnStyles = {
rootHovered: {
backgroundColor: "red"
}
};
// ...
<FluentPrimaryButton text = {label} styles = {btnStyles} />;
I was wondering, is it possible to add a react component as the content?
I added the component inside the overlay like so -
this.player.overlay({
content: <SomeReactComponent />,
align: 'bottom-left',
overlays: [{
start: 'play',
end: 'end'
}]
});
and the SomeReactComponent is just a react component for a dynamic image renderer that looks like this
import like from './like.png';
import love from './love.png';
import neutral from './neutral.png';
class SomeReactComponent extends Component {
getImage(pic) {
const image = pic;
return image;
}
render() {
const pic = [love, like, neutral];
return (
<div>
{ sentimentsArray.map(sentiment =>
<img src={this.getImage(pic)} style={{ width: '75%', height: '75%', objectFit: 'scale-down' }} />
)}
</div>
);
}
}
When i call this.player.overlay in my console, it says the overlays.options.content is a Symbol of React.element, however, I'm not getting anything as an overlay
It's not possible to use React component for this property unfortunately, but only string or node element. Take a look to the doc for more information.
I am using vue-chartjs to render graphs on a webapp. I know you can print charts if you are using the original library. However I have no idea on how to do it with the vue version of the library.
I have my charts variable on an external charts.js file
import {Bar, mixins } from 'vue-chartjs'
Chart.defaults.global
let chartOptions = Chart.defaults.global;
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
let that = this;
that.chartOptions = {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
fontFamily: "'Overpass_Mono', 'Monaco', monospace",
fontColor: "rgba(254, 255, 248, 0.5)"
},
gridLines: {
color: 'rgba(255, 80, 248, 0.08)',
zeroLineColor: 'rgb(168, 119, 181)',
zeroLineWidth: 2
},
}],
xAxes: [{
ticks: {
suggestedMin: 0,
fontColor: "rgb(168, 119, 181)"
},
gridLines: {
color: 'rgba(255, 80, 248, 0.08)',
zeroLineColor: 'transparent',
}
}],
},
legend: {
labels: {
fontColor: 'rgb(168, 119, 181)',
}
}
},
this.renderChart(this.chartData, that.chartOptions)
}
}
Then on my component template I have:
<template>
<div class="report">
<charts v-if="todaySelected"
:chart-id="'total_visits_chart_bar'"
:height="chartsHeight"
:options="chartOptions"
:chart-data="datacollection"
></charts>
<div v-if="todaySelected">
<button #click="printChart(charts)">Print chart</button>
</div>
</template>
<script>
import charts from './chart_0.js'
components: {
charts,
},
data() {
return{
datacollection: {"datasets":[{"label":"Entries Today","data":[15,15,15,0]},{"label":"Currently Inside","data":[2,2,2,0]}],"labels":[]}
}
}.
methods: {
printChart(charts) {
charts.print();
},
}
</script>
Any help would be appreciated.
The answer is: Yes, it is. Your print method in the components' script could be:
methods:{
printChart() {
var canvasEle = document.getElementById('total_visits_chart_bar');
var win = window.open('', 'Print', 'height=600,width=800');
win.document.write("<br><img src='" + canvasEle.toDataURL() + "' />");
setTimeout(function(){ //giving it 200 milliseconds time to load
win.document.close();
win.focus()
win.print();
win.location.reload()
}, 200);
},
}
You can also add this to your component's style:
#media print{
#page {
size: landscape
}
}
vue-chartjs is based on chart.js and not canvas.js, thus it does not have a "build-in" way of printing.
You have to do it with some custom logic and the native javascript printing functions.
You can however grab the canvas element inside your chart component and generate for example an image and then print that image.
It will get a bit tricky, because you only have access to the canvas inside your chart component. So you will need to maybe wait for an event or prop to trigger the toDataURL call and then emit the image to your parent component where you can print it. If you want to trigger the print in your parent component.
methods: {
print () {
// grab the canvas and generate an image
let image = this.$refs.canvas.toDataURL('image/png')
// Emits an event with the image
this.$emit('chart:print', image)
}
}
In your parent component:
<template>
<your-chart #chart:print="handlePrint"
<template/>
....
...
methods: {
handlePrint(image) {
const win = window.open('', 'Print', 'height=600, width=800')
win.document.write(`<br><img src='${image}' />`)
win.print()
win.close()
}
}
It seems like the library is based on chartjs not canvasjs https://www.chartjs.org/docs/latest/ you might want to look into how to print a window Quick Print HTML5 Canvas, and remember you have access to the canvas element where your graph is drawn:
methods: {
printChart() {
const canvasEle = this.$el.querySelector('canvas');
//now your chart image is on canvasEle
},
}
If you are not against using export to pdf format, you can implement this task using jsPDF library, for example:
<template>
<div class="report">
<charts v-if="todaySelected"
:chart-id="'total_visits_chart_bar'"
:height="chartsHeight"
:options="chartOptions"
:chart-data="datacollection"
></charts>
</div>
</template>
<script>
import jsPDF from 'jspdf'; //for PDF printing
methods: {
pdfThatThing : function(){
//Default export is a4 paper, portrait, using milimeters for units
let pdfName = 'test';
var doc = new jsPDF();
doc.text("Header", 20, 20); //at x,y at def.units 2cm
//chart element
let canvasEle = document.getElementById('total_visits_chart_bar');
let chartURL = canvasEle.toDataURL(); //transform path
//a4 page is 209mm, adds at 4cm top, 2cm left, for 15cm in size
doc.addImage(chartURL, 'PNG', 20, 40, 150, 150 )
doc.save(pdfName + '.pdf');
},
}
</script>
There is also option to auto show print dialog in pdf viewer:
doc.autoPrint({variant: 'non-conform'})