Hello I am trying to implement my menu that I have created with css in all views, for example in my home view I want to invoke it as I saw an example on the web like this:
<template>
<Fragment>
<menu></menu>
<div class="portada">
<menu></menu>
<div id="desarrollofrontend">
Test Menu
</div>
<div class="text">
<h1>Test Menu Home</h1>
<h3>Description home</h3>
</div>
</div>
</Fragment>
</template>
<script>
import menu from '../components/Head/menu.vue'
export default {
components: { menu }
}
</script>
But so far nothing works for me, I'm really new to this
This is my view of my home page, I have my menu created with scss, in the <menu> </menu> tags it is how I saw some examples on the web but it does not work for me
Any recommendations to make it work?
Related
I am trying to setup a carousel for my home page with a carousel with some full screen images and parallax effect on them. I am new to quasar but have used vuetify quite often but recently switched to Vue3 so figured I would try out quasar. However, I am struggling to do this. I see there is a slot for QCarouselSlide but I am not sure how to tie into that for this parallax.
My code so far is as follows:
<template>
<q-page padding="false">
<q-carousel
v-model="slide"
swipeable
animated
navigation-position="left"
navigation
padding
style="height:100vh"
class="bg-purple text-white rounded-borders"
>
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg"></q-parallax>
</q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-parallax src="https://cdn.quasar.dev/img/parallax2.jpg"></q-parallax>
</q-carousel-slide>
</q-carousel>
</q-page>
</template>
<script setup>
import { ref } from 'vue'
const slide = ref('style')
</script>
Please refer following codepen.
https://codepen.io/Pratik__007/pen/rNrrRxj
<q-carousel-slide :name="1" class="column no-wrap">
<div class="row fit">
<q-parallax
src="https://cdn.quasar.dev/img/parallax2.jpg"
>
<h1 class="text-white">Basic</h1>
</q-parallax>
</div>
</q-carousel-slide>
This is my Manage page that was generated by the Scaffolded Identity.
Previously this weird Manage your account header with the subheading: Change your account settings and menu did not appear.
The only thing that showed was the form in the image and the Manage Account header located directly above the form but I'm not sure why suddenly this extra header and menu appears. I've tried searching on the page itself but it doesn't show up in the code. Is this a configuration somewhere?
EDIT:
Added structure of Manage
You can try to open the file _Layout.cshtml in the folder Manage, maybe there is something like this:
<h2>Manage your account</h2>
<div>
<h4>Change your account settings</h4>
<hr />
<div class="row">
<div class="col-md-3">
<partial name="_ManageNav" />
</div>
<div class="col-md-9">
#RenderBody()
</div>
</div>
</div>
#section Scripts {
#RenderSection("Scripts", required: false)
}
Based on your update, I think the problem comes from the way you add scaffolded item.
I suggest you to follow these steps to add all scaffolded items, then deleting which one you don't use.
Right-click on the solution -> Add -> New Scaffolded Item... -> Identity -> Identity -> Add
Check with the option: Override all files.
In the layout input, clicking on the ... button to select the default layout:
In the Data context class input, clicking on + button to create new context class:
After scaffolding, you will receive all the files:
Lastly, you can open the file _Layout.cshtml to check the title, the file content could be:
#{
Layout = "/Areas/Identity/Pages/_Layout.cshtml";
}
<h2>Manage your account</h2>
<div>
<h4>Change your account settings</h4>
<hr />
<div class="row">
<div class="col-md-3">
<partial name="_ManageNav" />
</div>
<div class="col-md-9">
#RenderBody()
</div>
</div>
</div>
#section Scripts {
#RenderSection("Scripts", required: false)
}
Using Vue 2 on Laravel 5.3
I would like to add a loading icon which covers the whole page for 3 seconds allowing all rendering happened, then showing the content after 3 seconds. However, without or with adding the div v-show="!loading" as shown below, the content actually flashed for around half second before it gone disappeared, then after 3 seconds it appears again. So I think there is an unexpected flash at the start when the page is loaded. I read a bit about v-cloak online but it seems only solve short flash of {{}} ?
<template>
<div>
<transition name="fade">
<div v-if="loading" class="loading">Loading…</div>
</transition>
<div v-show="!loading">
<slot>
<!-- Main Content -->
</slot>
</div>
</div>
</template>
<script>
export default {
data(){
return{
loading:true
}
},
props:[
],
mounted(){
var vm = this
vm.loaded()
LoadingEvent.$on('loading', function(loading){
vm.loading = loading
})
},
updated(){
},
methods:{
loaded(){
setTimeout(function(){
LoadingEvent.$emit('loading',false);
}, 1000);
},
}
}
</script>
Try putting both v-if and v-else inside transition like following:
<template>
<div>
<transition name="fade">
<div v-if="loading" class="loading">Loading…</div>
<div v-else>
<slot>
<!-- Main Content -->
</slot>
</div>
</transition>
</div>
</template>
I'm struggling with fullpage.js in Meteor.
When I add a button inside a template, the Template.templatename.events function does not fire on event.
For example:
Template HTML (messages.html)
<template name="messages">
<ul>
{{#each mess}}
<li>{{ messContent}}</li>
{{/each}}
<button class="addMessage">Add Message!</button>
</ul>
</template>
Template JavaScript (messages.js)
Template.messages.helpers({
mess: function(){
return Messages.find();
}
});
Template.messages.events({
'click .addMessage' : function(event){
console.log("clicked")
}
})
Main HTML
<head>
<title>fulltest</title>
</head>
<body>
{{> full}}
</body>
<template name="full">
<div id="fullpage">
<div class="section active">
<h1>First slide</h1>
{{> messages}}
</div>
<div class="section">
<h1>Second slide</h1>
</div>
</div>
</template>
My fullpage initialisation:
Template.full.rendered = function(){
$('#fullpage').fullpage();
}
If I remove the fullpage initialisation then the click event gets logged. Still new at Meteor, I didn't manage to grasp what's going wrong here.
All help much appreciated,
Joris
Use delegation or use verticalCentered:false and scrollOverflow:false.
From the fullPage.js FAQs:
My javascript/jQuery events don't work anymore when using fullPage.js
Short answer: if you are using options such as verticalCentered:true or overflowScroll:true in fullPage.js initialization, then you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in the afterRender callback of fullpage.js
Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as "dynamically added content" and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.
Hello MarionetteJS Gurus,
I have what is probably a very simple problem, but I can't wrap my head around how to solve it. I have an application with 2 regions and 1 layout, and I'm utilizing the Ratchet CSS library for prototyping. Functionally, the goal is simple: display a list of contacts in one view, with a header and search bar. If the user selects a contact, remove the search bar and retain only the header.
The problem appears to be the wrapping divs that are required to swap views in and out. The Ratchet CSS needs the header bars to be directly above the content section in order to properly dock them at the top of the viewport, but Marionette's regions and layouts (at least with my configuration) are preventing this from happening. Perhaps I could better structure my views?
JSFiddle of the resulting output: http://jsfiddle.net/VB7py/3/ You'll notice that the header/search area overlaps the content area.
menuRegion contains a footer menu, and mainRegion contains a layout consisting of a header region, a search region, and a "main content" region. Below are some snippets of my code:
Regions
var App = new Marionette.Application();
App.addRegions({
headerRegion: "#header-region",
menuRegion: "#menu-region",
mainRegion: {
selector: "#main-region",
regionType: MainRegion
}
});
Layouts/Views
List.Layout = Marionette.Layout.extend({
template: "#contacts-layout",
regions: {
headerRegion: "#header-region",
searchRegion: "#secondary-header-region",
contactsRegion: "#contacts-region"
}
});
List.Search = Marionette.ItemView.extend({
tagName: "div",
template: "#contact-list-search",
className: "bar bar-standard bar-header-secondary"
});
List.Header = Marionette.ItemView.extend({
template: "#contact-list-header"
});
Templates
<!-- Application Layout -->
<script type="text/template" id="contacts-layout">
<div id="header-region" class="bar bar-standard"></div>
<div id="secondary-header-region">
</div>
<div id="contacts-region" class="content"></div>
</script>
<script type="text/template" id="contact-list-header">
<nav class="bar bar-standard"><h1 class="title">Contacts</h1></na>
</script>
<script type="text/template" id="contact-list-search">
<input type="search" placeholder="Search" />
</script>
<script type="text/template" id="menu-template">
<nav class="bar bar-tab bar-footer">
</nav>
</script>
The wrapping divs inside the regions did not seem to be a problem. However, you need to set those bar specific css classes to the regions instead of it's nested elements. Like:
<div id="header-region" class="bar bar-standard">
<div>
<nav>
<h1 class="title">All Contacts</h1>
</nav>
</div>
</div>
<div id="secondary-header-region" class="bar bar-header-secondary">
<div>
<input type="search" placeholder="Search">
</div>
</div>
See: http://jsfiddle.net/Cardiff/7Wd6W/
You could pre-set those classes on your region elements or add these specific classes on region initialization, see: https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md#instantiate-your-own-region