I've followed the quill playground guide but using vuejs and it doesn't work. There's no error on the browser but a weird arrow is showing.
Example: https://codepen.io/danny1014/pen/gOLZNZQ
var quill = new Quill("#quill-container", {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
["bold", "italic", "underline"],
["image", "code-block"]
]
},
scrollingContainer: "#scrolling-container",
placeholder: "Compose an epic...",
theme: "bubble"
});
Did you import css file of theme "bubble"?
Something like #import "~quill/dist/quill.snow.css";
Try using snow theme instead of bubble
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 would like to change theme dynamically. I define a lightTheme and darkTheme li
export default createVuetify({
theme: {
defaultTheme: "lightTheme",
themes: {
lightTheme: {
dark: false,
colors: {
primary: "#ad1c3d",
"page-header-background": "#d7d7ce",
"page-background": "#cdcdc1",
"table-header": "#cdcdc1",
background: "#c0c0b5",
"header-background": "#b5b5a6",
"info-text": "#666660",
},
},
darkTheme: {
dark: true,
colors: {
primary: "#52E3C2",
"page-header-background": "#282831",
"page-background": "#32323E",
"table-header": "#2e2e2e",
background: "#3F3F4A",
"header-background": "#4a4a59",
"info-text": "#99999F",
},
},
},
},
});
I can access the theme using this.$vuetify.theme however I can't find how I can change the theme at runtime. The method of doing this in Vuetify 2 is different. I can't find any examples with Vuetify 3.
What is the correct method of changing theme dynamically in Vuetify 3?
It looks like the documentation is incorrect. The documentation says to use
this.theme.global.name.value = "themeName"
but actually it's
this.theme.global.name = "themeName"
I'm trying to replace the default CoreUI icons from the admin panel template sidebar with a Font Awesome icons.
I've installed Font-Awesome successfully using the latest official installation instructions of FontAwesome for vue and can display the icons just fine using the <font-awesome-icon icon="tasks" /> syntax. But I can't get the same icon to show up in the CoreUI Sidebar component.
Here is my _nav.js:
export default [
{
_name: 'CSidebarNav',
_children: [
{
_name: 'CSidebarNavItem',
name: 'Dashboard',
to: '/dashboard',
icon: 'cil-speedometer'
},
{
_name: 'CSidebarNavItem',
name: 'Account',
to: '/account',
icon: 'cil-bank'
},
{
_name: 'CSidebarNavItem',
name: 'Projects',
to: '/projects',
fontIcon: 'fas fa-tasks'
}
]
}
]
So far I tried fontIcon: 'fas fa-tasks', icon: 'fas fa-tasks', icon: 'faTasks', etc. but nothing works.
As you can see below, the "tasks" icon show up in the card body (using <font-awesome-icon icon="tasks" />), but not in the sidebar for the Project item.
This link suggest using fontIcon api instead of Icon, however this requires the CSS versions of icons to be imported, which I can't find using the recommended Font Awesome installation guide.
At this point how could I either import the CSS icons so it works with the CSidebarNavItem component, or is there a way to reference a Font Awesome icon directly ?
This is fontawesome icon portal https://fontawesome.com/v4.7/icon/address-book . Here icon name has address-book. You can't access directly address-book name in coreui template.
you should use this fa key
fa fa-address-book
sample code,
{
name: 'Address',
url: '/address',
icon: 'fa fa-address-book',
},
You need to pass children CSidebarNavItem for custom content (component supports only CIcon component configuration by default)
<CSidebarNavItem>
<CLink
class="c-sidebar-nav-link"
to="/home/test02"
:exact="true"
activeClassName="c-active"
>
<FontAwesomeIcon class="c-sidebar-nav-icon" icon="faCoffee" />
Test02
</CLink>
</CSidebarNavItem>
You have sidebar rendered through CRenderFunction which docs are available here:
https://coreui.io/vue/docs/components/render-function.html
Also CSidebarNavItem and CIconcomponents are documented on this site
just add core ui and font Awesome css classes together in i tag
{
_tag: 'CSidebarNavItem',
name: 'Category',
to: '/category',
icon: <i class="fad fa-acorn c-sidebar-nav-icon"></i>,
},
I tried to use Chart.js in Vue through vue-chartjs. Also, I used [chartjs-plugin-datalabels][1]. Currently, I can toggle a chart by clicking the "Show a chart" button.
I could see values for each label in the chart. But, I couldn't customize the data labels.
[StackOverflow]
How to properly use the chartjs datalabels plugin
ChartJS: datalabels: show percentage value in Pie piece
Show values on top of bars in chart.js
[The plugin's Github Page]
https://github.com/chartjs/chartjs-plugin-datalabels/issues/10
https://github.com/apertureless/vue-chartjs/issues/410
[JS Fiddle]
https://jsfiddle.net/simonbrunel/mo5y35yg/
https://jsfiddle.net/simonbrunel/0jhffwfd/
Even after reading information above, I couldn't make mine work.
I would greatly appreciate any advice of solving this problem. Thanks! :)
Some of my code is the following:
<script>
import PieChart from "./pieChart.js";
import ChartJSPluginDatalabels from "chartjs-plugin-datalabels";
export default {
name: "App",
components: {
PieChart
},
data() {
return {
isHidden: false,
chartData: {
labels: ["Green", "Red", "Blue"],
datasets: [
{
backgroundColor: ["#41B883", "#E46651", "#00D8FF"],
data: [1, 10, 5]
}
]
},
options:{
plugins: {
datalabels: {
color: 'white',
textAlign: 'center',
font: {
weight: "bold",
size: 16
}
}
}
}
}
}
};
</script>
Please check out the entire code here :
https://codesandbox.io/embed/xy4x07q0o.
You need to bind options to pie-chart
<pie-chart v-if="isHidden" :data="chartData" :options="options"></pie-chart>
Checkout demo here https://codesandbox.io/s/5kvll0xqyl
new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'dark',
items: [home, about]
});
For the ui, can I specify like, a color instead of dark and light? How can I make it a specific color or background image of our choice?
Thanks.
What you need to do is to define a new ui type using SASS and COMPASS.
So, you have to be familiar with these frameworks.
If you already install these, and you already know how to create you application theme CSS, then you can add the following line to your theme .sass file to define a custom ui
#include sencha-tabbar-ui('myUI', $tabs-myUI, $tabs-bar-gradient, $tabs-myUI-active);
As you can see I'm using some variables to set the wanted style.
In details:
$tabs-myUI: Is the Base color for "myUI" UI tabs.
$tabs-bar-gradient: Is The Background gradient style for tab bars.
$tabs-myUI-active: Is the Active color for "light" UI tabs.
You can define how many different UI you want and use them in your code in the following way:
new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'myUI',
items: [home, about]
});
This is the official Sencha way to do it.
Hope this helps.
Give your tabPanel or its children a cls attribute. This gives the html tag a class, so you can use it for styling in your CSS.
Obviously after this, you would style it using something like:
background-image: url(...);
background-color: pink;
#AndreaCammarata
I'm able change the tabpanel Color using your above sass.
But I'm to change the active colour of the tabs.
Please find below my code
#include sencha-tabbar-ui('tabcolour', #333333,'glossy',#0088CC);
VIEW:
config : {
style: "background-color: white",
ui: 'tabcolour',
tabBar : {
ui: 'tabcolour',
layout : {
pack : 'center'
}
},
layout : {
type : 'card',
animation : {
type : 'fade'
}
},
items : [{
title : 'Descrption',
xtype : 'item_description'
},{
title : 'Photos',
xtype : 'Item_Photos',
}, {
title : 'Comments',
xtype : 'item_add_viewcomment'
}, {
title : 'Videoes',
xtype : 'item_video'
}
]
}