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>,
},
Related
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
Im using Gridsome frame work for VUE JS
I am navigating to a new page by using this.$router.push(PATH, PARAMS)
this.$router.push({path: `/${value.sectionLink}/`, params: {pageOBJ: value}})
The page route works fine - however the PROP, pageOBJ is undefined in the page as seen in the VUE inspector:
it should be an object (which is what VALUE is set to) i.e.
I've tried a number of different techniques to resolve this but have not managed to figure this out so I assume I have missed something here?
gridsome auto generates the page routes when you add a new PAGE.VUE file to the /pages folder -
Is this the issue?
Gridsome also references graphQI, are you supposed to grab the data using graph and not by pushing Props?
Any help would be amazing here - please let me know if you need any further information.
Thanks -
W
UPDATE BASED ON CURRENT ANSWERS:
I have already added props:true to the component as shown below, but the issue is still present.
CODE SNIPPET - SUMMARY:
User clicks on the SectionTitle component, this then emits the page link
(each of the SectionTitle is a object from : sections array of Object)
To see the current online version of this please look at
wtwd.ninjashotgunbear.com
<template>
<Layout>
<div class="navs" v-for="section in sections" :key="section.sectionTitle">
<!-- On click delay for screen to come ove top -->
<!-- router to be put here -->
<SectionTitle :data="section" #routeChange="reRoute($event)"/>
</div>
<PageTransition :dataObj="transitionObj"/>
</Layout>
</template>
<script>
import SectionTitle from '#/components/SectionTitle.vue';
import PageTransition from '#/components/PageTransition.vue'
export default {
metaInfo: {
title: 'Hello, world!'
},
components: {
SectionTitle,
PageTransition
},
data(){
return {
// data to be passed to the components
sections: [
{
sectionTitle: 'Clients',
sectionLink: 'clients',
sectionSubTitle: '"Some of the amazing humans I have had the pleasure of working with"',
backgroundColor: '#F08080',
titleColor: '#E65454'
},
{
sectionTitle: 'Projects',
sectionLink: 'projects',
sectionSubTitle: '"I LIKE TO MAKE PROJECTS THAT WILL TEST MY KNOWEDGE AND EXPOSE MY WEAKNESSES"',
backgroundColor: '#20B2AA',
titleColor: '#11DACF'
},
{
sectionTitle: 'Skills',
sectionLink: 'skills',
sectionSubTitle: `"LEARNING WILL NEVER END, SO LONG AS YOUR AMBITIONS ARE STOKED, AND I've got plenty of ambition"`,
backgroundColor: '#A921B2',
titleColor: '#CA14D6'
},
{
sectionTitle: 'About Me',
sectionLink: 'aboutme',
sectionSubTitle: `"My joruney becoming a developer so far"`,
backgroundColor: '#FFFFFF',
titleColor: '#D1D1D1'
},
{
sectionTitle: 'Contact Me',
sectionLink: 'contactme',
sectionSubTitle: `"If you have any questions or want to reach out about a project then i'd love to speak with you"`,
backgroundColor: '#2185B2',
titleColor: '#0076AB'
}
],
divText: null,
transitionObj: null
}
},
methods:{
reRoute(value){
// 1)A) - change the text of the div to say the section it is being moved to
this.divText = value.sectionTitle
this.transitionObj = value
// FIND center pixcle value to place text - scrolled height + windowHeight / 2 = centerPos
let centerPos = window.scrollY+(window.innerHeight/2)
// Apply secific Title color - and center possitioning
document.querySelector('.leaveScreen p').style.cssText=`color: ${value.titleColor}; top: ${centerPos}px`
// 1) animate the loading screen
let screen = document.querySelector('.leaveScreen');
screen.style.cssText=`background: ${value.backgroundColor}; left: 0%`;
// 2) re-route the page
setTimeout(()=>{
this.$router.push({path: `/${value.sectionLink}/`, params: {pageOBJ: value}}) // << says that the route name is not found
// this.$router.push(value.sectionLink)
}, 700)
}
}
}
</script>
<style lang="scss">
// **** ERROR CAUSED BY NOT INSTALLING SCSS package ****
// https://gridsome.org/docs/assets-css/ &&&& npm install -D sass-loader node-sass
// Universal Font being used - LEMON MILK
#font-face {
font-family: LemonMilk;
src: url('../assets/fonts/LemonMilk.otf');
}
* {
box-sizing: border-box;
}
.navs {
font-family: LemonMilk;
}
.SectionTitle{
cursor: pointer;
}
</style>
Pass name rather than path in this.$router.push()
this.$router.push({name: ${value.sectionLink}, params: {pageOBJ: value}})
You should add props:true to the route definition :
{
path:'/thepath/:theParam',
component:SomeComponent,
props:true
}
I'm trying to import element UI into Nuxt.js and on their twitter account they linked to glitch (https://glitch.com/edit/#!/nuxt-element-ui?path=layouts/default.vue:1:0) that has the important files listed. In the default.vue you it has this listed
<template>
<div>
<nuxt/>
</div>
</template>
<style src="element-ui/lib/theme-default/index.css"></style>
I imported element ui into my nuxt project by running:
npm i element-ui --save nuxt
searched for index.css in the folder and copy-pasted that link as a source to the style src (node_modules\element-ui\lib\theme-chalk\index.css) for the default.vue file but I am getting an error that it can not locate it.
I also tried to use the cdn style file from element ui's website:
https://unpkg.com/element-ui/lib/theme-chalk/index.css
Both of them are resulting in "Module not found"
What am I doing wrong? Any other place that has anything listed on how to import element ui into nuxt?
Global CSS should be defined in css section of nuxt.config
e.g.
module.exports = {
css: [
{ src: '~/assets/index.css', lang: 'scss' },
],
｝
and CDN stylesheet should be defined in head.links
head: {
link: [
{ rel: 'stylesheet', href: 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' },
],
},
Read:
https://nuxtjs.org/api/configuration-css
https://nuxtjs.org/api/configuration-head
Inside your style, you can import it like this:
<style>
#import '~element-ui/lib/theme-default/index.css'
</style>
But you can also import it directly from your javascript:
import 'element-ui/lib/theme-default/index.css';
Background
I am using xotahal/react-native-material-ui material design in my React-Native application. I have implemented the ActionButton with multiple buttons in it. I can not find anywhere in the docs that is explains how to use this. I was able to find the component in the git repo and managed getting the buttons to render but I can't get them to fire of onClick().
Example
The buttons appear when the main blue button is clicked.
Question
What is the proper way to pass functions to these buttons, or where in the documentation is this explained?
Code
<ActionButton
actions={[
{ icon: 'note-add', label: 'Add', onPress: () => this.toggleSearch() },
{ icon: 'save', label: 'Save', onPress: () => this.handleOnSave() },]}
/>
toggleSearch() {
console.log('################## HEY SEARCH WORKS ##########################');
}
Problem with this is that no functions are fired when I click the button.
I would be grateful if someone knows where this is explained in the documentation.
ActionButton actions prop expects an object with the shape of {icon, label, name}. If you want to handle onPress you need to define it as a prop to the component and not to the actions object.
Example
<ActionButton
actions={[
{ icon: 'note-add', label: 'Add' },
{ icon: 'save', label: 'Save'}]}
onPress={(text) => this.onPress(text)}
/>
// ...
onPress(text) {
switch(text) {
case:
// do something on this case
break;
case:
// do another thing on this case
break;
}
}
I am trying to put together my first app using react-native-navigation and I am taking pieces from the available examples on the web site.
Anyway, I am now trying to use a push function to have a new screen displayed, but the navigator seems to be undefined:
the structure is:
- app.js
- firstScreenTab
- pushScreenTab
- secondScreenTab
The navigator is obviously defined in the app.js file.
In my firstScreenTab:
testNavPress() {
this.props.navigator.push({
screen: 'manager.SecondTabScreen',
title: 'Pushed Screen'
});
}
<Button onPress={this.testNavPress.bind(this)}>
Push
</Button>
`
I set up my app using redux, I am wondering how should I pass my navigator as prop?
The start app function in my app.js looks like this:
startApp(root) {
console.log(root);
console.log('START APP!!!!!');
const tabs = [
{
label: 'Employees', // tab label as appears under the icon in iOS (optional)
screen: 'manager.EmployeeListScreen', // unique ID registered with Navigation.registerScreen
icon: require('../img/one.png'), // local image asset for the tab icon unselected state (optional on iOS)
selectedIcon: require('../img/one_selected.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
iconInsets: { // add this to change icon position (optional, iOS only).
top: 6, // optional, default is 0.
left: 0, // optional, default is 0.
bottom: -6, // optional, default is 0.
right: 0 // optional, default is 0.
},
title: 'Employee List', // title of the screen as appears in the nav bar (optional)
navigatorStyle: {}, // override the navigator style for the tab screen, see "Styling the navigator" below (optional),
navigatorButtons: {
rightButtons: [
{
icon: require('../img/navicon_add.png'), // for icon button, provide the local image asset name
id: 'add' // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
}
]
} // override the nav buttons for the tab screen, see "Adding buttons to the navigator" below (optional)
},
{
label: 'One', // tab label as appears under the icon in iOS (optional)
screen: 'manager.FirstTabScreen', // unique ID registered with Navigation.registerScreen
icon: require('../img/one.png'), // local image asset for the tab icon unselected state (optional on iOS)
selectedIcon: require('../img/one_selected.png'), // local image asset for the tab icon selected state (optional, iOS only. On Android, Use `tabBarSelectedButtonColor` instead)
iconInsets: { // add this to change icon position (optional, iOS only).
top: 6, // optional, default is 0.
left: 0, // optional, default is 0.
bottom: -6, // optional, default is 0.
right: 0 // optional, default is 0.
},
title: 'Screen One', // title of the screen as appears in the nav bar (optional)
navigatorStyle: {}, // override the navigator style for the tab screen, see "Styling the navigator" below (optional),
navigatorButtons: {} // override the nav buttons for the tab screen, see "Adding buttons to the navigator" below (optional)
},
{
label: 'Two',
screen: 'manager.SecondTabScreen',
icon: require('../img/two.png'),
selectedIcon: require('../img/two_selected.png'),
title: 'Screen Two'
}
];
switch (root) {
case 'user':
Navigation.startTabBasedApp({
tabs,
tabsStyle: {
tabBarButtonColor: 'white',
tabBarSelectedButtonColor: 'white',
tabBarBackgroundColor: '#099880'
}
});
break;
default:
Navigation.startSingleScreenApp({
screen: {
screen: 'manager.LoginScreen', // unique ID registered with Navigation.registerScreen
title: 'Log in', // title of the screen as appears in the nav bar (optional)
navigatorStyle: {}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
}
});
}
} // startApp
}
export default App;
I browsed other questions but most of them refer to react-navigation, I am using react-native-navigation.
Navigation.startTabBasedApp doesn't use a navigator - it simply invokes a native method that constructs the UI according to the object you've provided.
Make sure you call super(props) in firstScreentab so RNN can inject the navigator into your screen.