I would like to be able to fully control the background color of an element inside a Vuetify3 card with variant=tonal.
In the example below, I want the Inside component to be white in both cases. The inner component does not have to be a `, just anything, that allows full color control.
How do I do this?
<v-card class="ma-5" color="red" variant="tonal">
Test
<v-sheet class="ma-5" color="white" variant="tonal">
Inside
</v-sheet>
</v-card>
<v-card class="ma-5" color="red">
Test
<v-sheet class="ma-5" color="white" variant="tonal">
Inside
</v-sheet>
</v-card>
Related
I need to remove text from my button if the screen is small in size. Which I did using Flex API. I also need to change the button style to "mat-mini-fab" from "mat-raised-button". How can make this button attribute conditional? ex on small screen attribute "mat-mini-fab" should be applied else "mat-raised-button". Preferring to use Flex API here something like fxShow fxHide used for elements.
<button matTooltip="Save" mat-raised-button (click)="saveMember()" color="accent" class="submit-button" aria-label="SAVE" [disabled]="memberForm.invalid">
<mat-icon>save</mat-icon><span fxHide fxShow.gt-sm>SAVE</span>
</button>
mat-raised-button and mat-mini-fab are directives (actually they are part of a directive selector), and directives can not be made conditional. Your only option is to have different button elements for each directive/type screen size and use the flex api to show or hide them accordingly. For example:
<button mat-raised-button fxHide fxShow.gt-sm>
<mat-icon>save</mat-icon>
SAVE
</button>
<button mat-mini-fab fxShow fxHide.gt-sm>
<mat-icon>save</mat-icon>
</button>
In Vuetify's pre-defined layouts, there are two very similar pieces of example code:
<v-app>
<v-navigation-drawer app></v-navigation-drawer>
<v-toolbar app></v-toolbar>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
<v-footer app></v-footer>
</v-app>
and
<v-app>
<v-navigation-drawer app></v-navigation-drawer>
<v-toolbar app></v-toolbar>
<v-content>
<router-view>
<v-container fluid></v-container>
</router-view>
</v-content>
<v-footer app></v-footer>
</v-app>
The second one looks better in my app, but it really confuses me how it works. How can there be a <v-container> inside <router-view> when <router-view> is replaced by route content? What is this supposed to achieve?
Any direct content of <router-view> will be displayed when there is no matching route for that <router-view>. It will be replaced by the matched route component. It's placeholder content until a route is matched.
I'm implementing a bootstrap 3 carousel on kentico 9 and need some help with automatically hiding the carousel control (including the circle indicator and the next/previous arrow) if there's only one item left, if possible.
What I've done for the carousel was setting up a new page type for this in which each banner is a page in the content tree under /hero/ folder. Then used 2 repeaters: the first one displays the circle indicator; the second one displays the banner info. All worked well.
Here's how the indicator repeater is set up:
Content before: <ol class="carousel-indicators">
Content after </ol>
Item transformation: <li data-target="#hero-banner" data-slide-to="<%# DataItemIndex%>" class="<%# (DataItemIndex == 0 ? "active" : "" ) %>"></li>
It means the first circle is always there. How to hide it and get rid of the <ol> tags in content before/after?
The next/previous arrows are again in the webpart zone content after, which has this html:
<a class="left carousel-control" href="#hero-banner" data-slide="prev"><span class="icon-prev"></span></a>
<a class="right carousel-control" href="#hero-banner" data-slide="next"><span class="icon-next"></span></a>
</div> <!--/#hero-banner-->
Using content before/after is like hard-coding it onto the page, but I don't know how to make it displayed dynamically and automatically only when we have more than one item. Could you help?
you can use <%# DataItemCount %> One of the [Transformation methods][1]
[1]: https://docs.kentico.com/display/K8/Reference+-+Transformation+methods to determine how many items there are. Then just have the html added in if there is more than one. Something like
<%# If(DataItemCount > 1,'html for more than one item','html for only one') %>
Of course, if you are using the envelope before / after to show arrows, you could also use jquery to determine how many items are there & hide the arrows based off that.
$(function(){
if($(".carousel-indicators li").length == 1){
$(".left.carousel-control").hide();
$(".right.carousel-control").hide();
}
});
I would like to know how Wikipedia does its search field. What I mean by this is two things: Its gradient and its button.
How does it make a gradient in the field? This can be easily done with CSS cross browser at this point, but when you do the IE CSS code, it aliases the text. Wikipedia has a gradient background, but the text is still anti-aliased! How do they do that?
Also, how did they put a clickable search button INSIDE the text field?
Thanks.
It appears that the actual search input has no styling -- meaning no border and a transparent background. The containing div is styled to look like an input field (border and gradient). The clickable button is inside the div but not inside the actual input element.
You could just look at the code. The search box as it appears is only a div element with a border. This div itself has the gradient set via CSS (background-image). As you can see the button element is also not inside the text field.
<div id="simpleSearch">
<input id="searchInput" name="search" type="text" title="Search Wikipedia [f]" accesskey="f" value="" />
<button id="searchButton" type='submit' name='button' title=""><img src="[x]" alt="Filltext" /></button>
</div>
When I insert an image in Dreamweaver: how do I align it freely like move and place the image wherever I want istead of using the alignments?
You may want to use a "div" element and put your image inside of it.
Or you can set style of the image as "position absolute".
You can use align attribute in HTML code in the div tag.
<div align="center">
This is some text!
</div>
You should have to use a div with its property of float(either left or right)
You can use in such a way as follows:
<div id="xyz" style="float : left; position:relative">
hello world
</div>