I'm trying to add second line to v-btn text in Vuetify:
<v-btn>
<span class="first-line">hello</span>
<span class="second-line">world</span>
</v-btn>
but, it's doesn't work and show in one line!
please help me.
Two line text on buttons are against Material Design (basis of Vuetify) principles as they reduce legibility. Material Design documentation can be found here - scroll to subheader "Text Label".
You can use <br /> tag as i show below:
<v-btn>
<span class="first-line">hello</span><br />
<span class="second-line">world</span>
</v-btn>
Related
I'm new on vuetify and I'm a little confused by its grid system. I think we have just a v-container tag and after that just a v-row tag. v-col is a direct child of v-row and in v-col we shouldn't have any v-row. right?
Wrong. You can nest v-rows and v-cols. The only difference is that v-col, as you mentioned yourself, must be a direct child of v-row. Otherwise you can nest v-rows inside other v-rows, or inside v-cols, or inside v-container.
Try it yourself here. Just change the v-card inside v-col to v-row with some text and see how it works.
<v-row
:align="align"
no-gutters
style="height: 150px;"
>
<v-col
v-for="n in 3"
:key="n"
>
<v-row no-gutters>Row {{n}}</v-row>
</v-col>
</v-row>
Please open Microsoft Edge and go to this site here: https://www.bodecanada.com/
Click on the Scroll button at the bottom of the blue box at the top of the page. Notice that it doesn't scroll further down the page. If it does, try it a few times. It will eventually stop working. This bug is only replicable in Edge.
We developed this site in Vue.js. This is the code for the scroll button:
<div id="scroll-wrap">
<a #click="$vuetify.goTo('#section2')" class="white--text" style="margin:0 auto;">
<p class="white--text" style="font-size:12px;">Scroll</p>
<v-icon color="white" style="width:100%; text align:center;">expand_more</v-icon>
</a>
</div>
Can anyone tell why it won't always scroll in Edge? Thanks.
You could directly use <a> tag href attribute link to an element with a specified id within the page.
<a href="#section2" #click="$vuetify.goTo('#section2')" class="white--text" style="margin:0 auto;">
I want to use "semantic-ui" accordion with "rtl" icon in default accordion's icons looks like > and i want my accordions icons looks like this <
please help me to do this.
You can simply change the icon class that you are using to achieve your requirement.
I have used "angle left icon" for rtl. There are many more icon to show rtl, here is the link that contains list of supported icon by default in semantic.
<div class="ui styled accordion">
<div class=" title">
<i class="angle left icon"></i>
Title1
</div>
<div class="content">
<p>Title Content</p>
</div>
</div>
NOTE:
Make sure you are using icons from the correct version. Some of the legacy version icons doesn't work with the latest semantic version.
Using React-Bootstrap, how can I make an inverse glyphicon button?
I have buttons like this:
<Button onClick={this.onHome} >
<Glyphicon glyph="home" />
</Button>
but I'd like them to appear reversed.
This question asks about colors which is not the same.
Thanks!
To show a glyph on a green colored background, use bsStyle="success":
<Button onClick={this.onHome} bsStyle="success">
<Glyphicon glyph="home" />
</Button>
Another example, using a label instead of a button:
<Label bsStyle="success"><Glyphicon glyph="home" /></Label>
Some alternatives to success are warning info and for Button also link. The complete list is in the documentation at http://react-bootstrap.github.io/components.html
I'm currently creating a image gallery (using Zurb Foundation as Framework) and would like to show the zoom icon on image hover (like this example here: http://codepen.io/Twikito/pen/Jeaub). But I would like the icon to be a font (Font Awesome) icon and not just one but 3 individual clickable icons.. Would that be possible?
I've put a quick JSfiddle together using font-awesome. The CSS is hacked together but demonstrates what's possible. It should give you a starting point to experiment with.
<a href="#" title="" class="image">
<img src="http://www.lyricis.fr/wp-content/uploads/2010/04/kickass-film-still-01.jpg" alt="">
</a>
<div class="cn">
<div class="inner">
<i class="icon-zoom-in large"></i>
<i class="icon-cloud-download large"></i>
<i class="icon-comment large"></i>
</div>
</div>
Note: The JSfiddle above uses font-awesome.css called externally from bootstrapcdn.com