I'm pretty new using Onboarding component from Vue Material. I'm looking to use it as a carrousel for photos. I'm trying to implemented on my project but looks a bit messy. Anyone know some documentation a part from the official website?
THANKS
<md-layout md-row md-align="center" md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50">
<md-boards :md-auto="true" :md-infinite="true" :md-duration="5000" :md-swipeable="true" :md-controls="true" md-swipe-distance="50">
<md-board id="slide1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
<md-board id="slide2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
<md-board id="slide3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
<md-board id="slide4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
</md-boards>
</md-layout>
all the Lorem P tags are showed on the same slide (num.1), and the other 3 appears empty.
Looks good (but one sytax error - missing : character before 'md-swipe-distance="50"'.
I think it should work if you:
a.) include all required dependencies (CSS, JS)
b.) initialize Vue with material
Code:
HTML:
<div id="app">
<md-layout md-row md-align="center" md-flex-xsmall="100" md-flex-small="100" md-flex-medium="50">
<md-boards :md-auto="true" :md-infinite="true" :md-duration="5000" :md-swipeable="true" :md-controls="true" :md-swipe-distance="50">
<md-board id="slide1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
<md-board id="slide2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
<md-board id="slide3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
<md-board id="slide4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
</md-board>
</md-boards>
</md-layout>
</div>
JS:
Vue.use(VueMaterial);
new Vue({
el: '#app'
, methods: {
}
});
And include "dependencies";
CSS:
//unpkg.com/vue-material#0.7.4/dist/vue-material.css
//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic
//fonts.googleapis.com/icon?family=Material+Icons
JS:
//unpkg.com/vue#2.2.4
//unpkg.com/vue-material#latest
Codepen to play with it:
https://codepen.io/anon/pen/vZMqEx
Good luck :D
Related
I am practicing with css-grid and media queries. When I add the media query for max-width 768px nothing happens when I shrink the screen to that size and I still see the 4 columns instead of the 2 I am trying to apply.
I am using Visual Studio Code and the live server. I already tried opening the html directly in Finder (I am using mac os), i have refreshed the page and still have the same issue.
Something is overriding that media query when I have a screen size under 768px and when I inspect the file I see these messages below. How can I solve this or what am I doing wrong here?
Very thankful for any help!
body {
background: green;
}
.grid {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 1rem;
}
#media (max-width: 768px) {
.grid {
display: grid;
grid-template-columns: repeat (2, auto);
}
}
<body>
<div class="grid">
<div class="item">
<h3>Heading 1</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
<div class="item">
<h3>Heading 2</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
<div class="item">
<h3>Heading 3</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
<div class="item">
<h3>Heading X</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
</div>
</div>
</body>
There is a space between the word repeat and the opening bracket. Remove that and all should be OK.
The yellow warning triangle shows that something was wrong with that line.
I want to add a header to my application, and followed the guidelines for the default application markup. By using this sample code:
<v-app>
<v-app-bar>
header
</v-app-bar>
<v-main>
<v-container fluid>
<v-container>
<v-card>
<v-card-title>
card title
</v-card-title>
</v-card>
</v-container>
</v-container>
</v-main>
</v-app>
It produces this result:
As you can see, the header stretches to the bottom. If there is more content in the card, it doesn't. See Codepen for reproduction purposes.
Is this behaviour a desired one? How can I prevent it from doing that? I don't want the header to be fixed so I removed the app prop from the v-app-bar. So this is an example of how the header bar should behave on scrolling etc.
#header {
background: yellow;
}
#content {
background: green;
}
<div id="header">
Header
</div>
<div id="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore
dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
</div>
Just add app property (if you don't want it to be fixed, then add absolute property as well)
<v-app-bar app absolute>
From app property docs:
Designates the component as part of the application layout. Used for
dynamically adjusting content sizing. Components using this prop
should reside outside of v-main component to function properly. You
can more information about layouts on the application page. Note: this
prop automatically applies position: fixed to the layout element. You
can overwrite this functionality by using the absolute prop
I'm loading data from XML to my NSString, but data is formated like this:
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Sed a velit ut nulla tincidunt finibus sit amet sed felis.
Fusce quis quam sapien.
It has line breaks, how can I romeve that so the text looks like this(all in one line):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a velit ut nulla tincidunt finibus sit amet sed felis. Fusce quis quam sapien. Cras diam metus, viverra in urna sed, efficitur varius sem. Pellentesque accumsan, lectus at rutrum pulvinar,
Try this
NSString *newString = [[oldString componentsSeparatedByCharactersInSet:[NSCharacterSet newlineCharacterSet]] componentsJoinedByString:#" "];
How do I reformat long (doc) comments in my code? Hitting "reformat" doesn't work. For example when I have this in my code:
/**
* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta ac urna quis sagittis. Nam risus leo, ultricies
* id ante sed, bibendum rutrum diam.
* Suspendisse viverra dui et ligula aliquet, sit amet mattis magna consequat. Morbi venenatis tempus mattis.
* Praesent mollis quam non turpis laoreet placerat.
*/
How do I turn it into this?
/**
* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta ac urna quis sagittis. Nam risus leo, ultricies
* id ante sed, bibendum rutrum diam. Suspendisse viverra dui et ligula aliquet, sit amet mattis magna consequat. Morbi
* venenatis tempus mattis. Praesent mollis quam non turpis laoreet placerat.
*/
Such functionality is not currently available in PhpStorm.
But you may try Wrap to Column plugin -- it may do OK for you (seems to work -- based on very quick test).
Related tickets:
http://youtrack.jetbrains.com/issue/WI-374
http://youtrack.jetbrains.com/issue/WI-3713
http://youtrack.jetbrains.com/issue/WI-13469
http://youtrack.jetbrains.com/issue/WI-18264
I like to add value when I type zen coding. For example, input:text becomes :. How do I make it so that input:text becomes and place keyboard cursor between '' of value property?
#Moon
Here is a trick that I use.
select>option#$*5 // this would give the following HTML <select>
<select>
<option id="1"></option>
<option id="2"></option>
<option id="3"></option>
<option id="4"></option>
<option id="5"></option>
</select>
then, you select the whole <select> block in your text editor.
Then, replace all "<option id" with "<option value".
Cheers :-)
If you ment the value by defining what value should be wrapped (between open and closing tags), then use following pattern
b{this is a bold text}
which results to
<b>this is a bold text</b>
Allthough I'm not aware of the editors and IDE's supporting this feature, but all I can say is it works for IntelliJ and Notepad++.
Adding this table>tr*5>td*5>lorem10
Will generate:
<table>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, aperiam.</td>
<td>Sit eius temporibus optio reprehenderit itaque blanditiis harum consectetur rerum.</td>
<td>Ex, odit, nostrum quia nemo consequuntur quisquam corrupti ipsam quis.</td>
<td>Voluptatibus, cum, aspernatur rem officia recusandae similique saepe praesentium nulla.</td>
<td>Labore, obcaecati iure rerum beatae dignissimos fugit sapiente! Sequi, fugit.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, totam.</td>
<td>Officiis, dolores facilis non vitae eius accusamus consequatur magnam incidunt!</td>
<td>Voluptates repellendus delectus illo facilis at provident unde sint error!</td>
<td>Quibusdam, nisi, reprehenderit incidunt rem a ducimus sint expedita molestias?</td>
<td>Quam, laborum rerum unde quaerat fuga architecto odio voluptatum nemo.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, architecto.</td>
<td>Maiores, voluptatum modi sunt iure aperiam aut quisquam nobis suscipit?</td>
<td>Repellendus, amet vero modi inventore ipsam libero culpa animi debitis.</td>
<td>Earum consequuntur ut totam possimus provident libero ad commodi esse!</td>
<td>Reprehenderit, quo, et laboriosam inventore error quas facilis dignissimos voluptate.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, necessitatibus.</td>
<td>Officiis maxime praesentium repellendus distinctio cum atque aspernatur animi dolorum.</td>
<td>Culpa pariatur quos quis voluptate ratione eos unde accusantium quisquam.</td>
<td>Id possimus nisi sequi nostrum cum pariatur eius vel commodi.</td>
<td>Velit, et, iure incidunt illum culpa cum nihil quidem perferendis.</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, ab?</td>
<td>Labore, voluptatem quasi temporibus fugit cumque possimus obcaecati id dolor?</td>
<td>Asperiores hic maiores architecto alias commodi ea in suscipit unde!</td>
<td>Distinctio, quasi reprehenderit tempora ipsa nisi ad ut eaque numquam!</td>
<td>Nobis, illum ex excepturi quaerat mollitia animi vero repellat quam.</td>
</tr>
</table>
As far as I know, you can't - at least not in the default Zen Coding standard. There is at least one project that tries to add values and some rudimentary logic (like looping) to Zen Coding though, see https://github.com/zodoz/jquery-ZenCoding. This is a Javascript implementation, mind.
You can add attributes to tags using the square brackets, so writing input:text[value] would create <input type="text" name="|" id="|" value="|"> — the input with three places for placeholders, two generic, that come with :text and the value attribute which comes from [value].
Something I used once ..
select>option[value=$].gameSize${$x$}*10
will generate
<select name="" id="">
<option value="1" class="gameSize1">1x1</option>
<option value="2" class="gameSize2">2x2</option>
<option value="3" class="gameSize3">3x3</option>
<option value="4" class="gameSize4">4x4</option>
<option value="5" class="gameSize5">5x5</option>
<option value="6" class="gameSize6">6x6</option>
<option value="7" class="gameSize7">7x7</option>
<option value="8" class="gameSize8">8x8</option>
<option value="9" class="gameSize9">9x9</option>
<option value="10" class="gameSize10">10x10</option>
</select>
So, $ would expand to corresponding number...wherever you put it!
I was using Emmet plugin with Sublime Text 2.