I'm learning Vue framework, could not understand how to use slot, who can show me a sample demo please?
thanks a lot.
#Doc thank you for your answer and prompt. And i make out the demo:
<!DOCTYPE html>
<html>
<head>
<title>39、slot !</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<alert-box>
Something bad happened.
</alert-box>
</div>
<script>
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
var app = new Vue({
el:'#app'
})
</script>
</body>
</html>
As a quick code example from https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots
Lets say you want to render the given template called 'base-layout'
<div class="container">
<header>
<!-- We want header content here -->
</header>
<main>
<!-- We want main content here -->
</main>
<footer>
<!-- We want footer content here -->
</footer>
</div>
So you can see we have three slots 'header', 'main' and 'footer'.
If you write
<base-layout>
<h1 slot="header">Here might be a page title</h1>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<p slot="footer">Here's some contact info</p>
</base-layout>
Then the first h1 tag value goes inside the slot named 'header' in our template.
And similarly other values.
The result would be
<div class="container">
<!-- this is where the 'header' slot was -->
<h1>Here might be a page title</h1>
<!-- this is where the main slot was -->
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<!-- this is where the footer slot was -->
<p>Here's some contact info</p>
So slots are basically like placeholder which can be named and you can send information at exact part.
Related
I like to use MountingPortal to teleport an element (later a Component) to <body>. But the element is not moved to the target.
Setup
Create a Vue app with vue create portal-test and choose Vue 2 and all defaults
Add Vue-Portal: npm install --save portal-vue
Edit main.js: add import PortalVue from 'portal-vue' and Vue.use(PortalVue)
In packages.json under "dependencies" I've found "portal-vue": "^2.1.7",
Add portal target in public/index.html
In the body I add a div with id target-id that should be treated as a portal target:
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<hr />
<div id="target-id">
Hey
</div>
<hr />
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
Change App.vue
<template>
<div id="app">
<MountingPortal name="destination" mountTo="#target-id">
</MountingPortal>
<portal to="destination">
<p>This should be rendered outside</p>
</portal>
</div>
</template>
Expected output
The <p>This should be rendered outside</p> should displayed between the two <hr />.
Actual output
The <p>...</p> is missing in the DOM. I've tested in Firefox and Edge, the DOM looks the same.
Ah, ok, a <portal-target> must be wrapped in <MountingPortal>.
This works:
<template>
<div id="app">
<MountingPortal mountTo="#target-id">
<portal-target name="destination" />
</MountingPortal>
<portal to="destination">
<p>This should be rendered outside</p>
</portal>
</div>
</template>
I'm using Materialize to generate modals on a php website, only the data below is clearly visible.
This is based on data from a MySQL database. For each hard drive in said db, generate a card and populate with drive data.
For testing purposes I removed all php code to see if that was what was breaking it, sadly I still had normal text punch through.
Any ideas? Are there css options I can use to force the opaque settings? Or maybe an alternative altogether, I did have a look at css overlays but had the same problem.
In the code below I've removed all php. The complete website source code can be found at my repo
here (albeit without the modal stuff as not committed to master yet)
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<!-- Drive stats on index -->
<div class="card-content center">
<h6>Hard Drive Canonical Name Goes Here via PHP</h6>
<ul>
<li>Hard Drive Size Goes Here Via PHP</li>
<li>Hard Drive Temp Goes Here via PHP</li>
<li> </li>
<li>Last updated at database timestamp goes here via PHP</li>
</ul>
</div>
<div class="container center">
<a class="waves-effect waves-light btn blue darken-1 modal-trigger" href="#modal">Launch Temperature History</a>
<div id="modal" class="modal">
<div class="modal-content">
<div class="card graphcolour">
<div class="card graphcontent">
<canvas id=1></canvas> <!-- <?php echo htmlspecialchars( $drive['DiDriveId'] )?> is what would normally be in here -->
</div>
</div>
"hello there!"
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.modal').modal();
})
</script>
<!-- Status Images -->
<!-- Images would go here based on PHP if else statements -->
</div>
</div>
The materialize modal code snippets were edited versions of below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<h3>A Demo of Modal</h3>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn pink darken-1 modal-trigger" href="#demo-modal">Launch Modal</a>
<!-- Modal Structure -->
<div id="demo-modal" class="modal">
<div class="modal-content">
<h4>A Demo of Simple Modal</h4>
<p>Content of the modal goes here. Place marketing text or other information here.</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.modal').modal();
})
</script>
</body>
</html>
Thanks to SeanDoherty for clarifying what I felt was the answer. I moved the Modal outside of the card, added three empty line breaks to the bottom of my card, then re-added the modal script with css offsetting. It's cheap, but it works!
.modalPosition{
top: -100px;
}
I have a very simple HTML page that in summary includes the Fabric UI CSS file and has a body (body.ms-Fabric) with
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-sm12 ms-u-md4 ms-lg2">
Column 1
</div>
<div class="ms-Grid-col ms-sm12 ms-md8 ms-lg10">
Column 2
</div>
</div>
</div>
but is displaying two rows instead of the expected two columns
What am I doing wrong?
Am I missing any other CSS include or class?
Thanks
It does work. :)
They seem to have forgotten to update their guide when they included rtl support. Simply add dir="ltr" to the html tag or at least the div parent to .ms-Grid-col
<link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.3.0/css/fabric.min.css" rel="stylesheet" />
<div class="ms-Fabric" dir="ltr">
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2">A</div>
<div class="ms-Grid-col ms-sm6 ms-md8 ms-lg10">B</div>
</div>
</div>
</div>
I have the same issue here, I dont know why we are missing float left:
.ms-Grid-col{
position:relative;
min-height:1px;
padding-left:8px;
padding-right:8px;
box-sizing:border-box}
[dir=ltr] .ms-Grid-col{float:left}
[dir=rtl] .ms-Grid-col{float:right}
if you add float:left; to .ms-grid-col class then it will be ok
I want to create a static header, with some links that change a vue app like a SPA. I know how to do this within the main app, but how can it be achieved outside of it, in a static header for example?
App being the main vue instance.
<body>
<div id="header">
</div>
<div id="#app"></div>
</body>
As claimed in the comments you can simply put your static header inside your app
<div id="#app">
<!-- static -->
<div id="header">
<router-link to="" id="link_to_change_app_view" />
</div>
<!-- dynamic -->
<router-view></router-view>
</div>
I have just started working on turning a graphic design into a responsive website using Bootstrap 3. I would like to know the positioning of the .container in relation to other wrappers like, e.g. <nav>, <header>, <footer> or semantic custom wrappers like, e.g <div class="main-content">, etc.
I am not sure if I should wrap the above mentioned tags in the .container div or vice-versa - wrap the .container div in those tags.
Essentially, the question is whether the following are equal or there is a preference of order:
<div class="container">
<div class="main-content">
...
</div>
</div>
<div class="main-content">
<div class="container">
...
</div>
</div>
If it depends on the project specifics what markup to choose, what might be potential reasons for choosing one over the other?
I personally use following order
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- NAVIGATION -->
</div>
</nav>
<div id="content" class="container">
<!-- (MAIN)CONTENT -->
</div>
<footer>
<div class="container">
<!-- FOOTER -->
</div>
</footer>
</body>
so I can style the navigation nav and footer footer over the full width (e.g. background) and the content still offers the grid.
EDIT : It is based on Template Business Casual.
If you wish to style everthing to the same (responsive .container-)width you should better put everything inside the .container. This also depends on your CSS behind .main-content.
Maybe you could check the different examples (source code) from bootstrap to see which setting/design matches your preferences.