I want to do this but can't find any documentation about how to render components inside components
<x-accordion>
<x-accordion-tab />
<x-accordion-tab />
<x-accordion-tab />
<x-accordion-tab />
<x-accordion-tab />
</x-accordion>
Accordion
<div class="accordion-tabs">
</div>
Accordion Tab
<div class="accordion-tab">
<input type="checkbox" id="chck1" class="accordion-nav">
<label class="accordion-tab-label" for="chck1">Item 1</label>
<div class="accordion-tab-content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
</div>
</div>
It's blade#slots
<div class="accordion-tabs">
{{ $slot }}
</div>
Related
I use accordion component for FAQs from tailwind ui. It's looks like something like this:
<!-- Q1 -->
<div class="pt-6">
<dt class="text-lg">
<!-- Expand/collapse question button -->
<button type="button" class="text-left w-full flex justify-between items-start text-gray-400"
aria-controls="faq-0" aria-expanded="false">
<span class="font-medium text-gray-900"> What's the best thing about Switzerland? </span>
<span class="ml-6 h-7 flex items-center">
<!--
Expand/collapse icon, toggle classes based on question open state.
Heroicon name: outline/chevron-down
Open: "-rotate-180", Closed: "rotate-0"
-->
<svg class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</span>
</button>
</dt>
<dd class="mt-2 pr-12" id="faq-0">
<p class="text-base text-gray-500">I don't know, but the flag is a big plus. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Quas cupiditate laboriosam fugiat.</p>
</dd>
</div>
In this case when I run this code in Vite App accordion status is open by default. How can set status closed by default?
I have tried some cases here, but still not working on my code above.
For example, if I want this HTML to be repeated for every element, where H4 and p tags should be filled with info from the object, is it possible?
I've seen only implementations with a table.
<div class="single-menu">
<div class="myContainer">
<button id="decrement" onclick="stepper(this)">-</button>
<input
type="number"
min="0"
max="100"
step="1"
value="0"
id="my-input"
readonly
/>
<button id="increment" onclick="stepper(this)">+</button>
</div>
<img src="https://via.placeholder.com/150" alt="" />
<div class="menu-content">
<h4>chicken fried salad <span>$45</span></h4>
<p>
Aperiam tempore sit,perferendis numquam repudiandae porro
voluptate dicta saepe facilis.
</p>
</div>
</div>
I am creating a responsive sharepoint visual webpart.
everything works fine and looks good but my mobile view is pretty much off.
the controls doesn't shrink to the lowest mobile size..
i tried many times but still i have the same issue..
<fieldset class="form-horizontal">
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Name:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:TextBox MaxLength="50" runat="server" ID="txtTitle" CssClass="form-control">
</asp:TextBox>
</div>
</div>
<div class="clearfix">
</div>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Ano:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddYear" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="selectbasic">Mes:
</label>
<div class="controls col-xs-8 col-md-2">
<asp:DropDownList runat="server" ID="ddMonth" CssClass="form-control">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Tema de Salud:
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddHealthTopic">
</asp:DropDownList>
</div>
</div>
<div class="clearfix">
</div>
<div class="control-group">
<label class="control-label col-xs-8 col-md-3 " for="textinput">Unidad administrativa:(por sus siglas en ingles entre paréntesis)
</label>
<div class="controls col-xs-8 col-md-7">
<asp:DropDownList runat="server" CssClass="form-control" ID="ddOrgUnit">
</asp:DropDownList>
</div>
</div>
</fieldset>
<br />
<div class=" col-xs-10 col-md-10">
<div class="input-group" >
<span class="input-group-btn">
<asp:Button CssClass="btn btn-primary" ToolTip="Buscar" runat="server" ID="btnSubmit" Text="Buscar" OnClick="btnSubmit_Click" />
</span>
</div>
</div>
Your code seems to be fine ....
Try to add (If its no there)
<meta name="viewport" content="width=device-width, initial-scale=1">
head section of your master page
I want to make the pictures that scroll through the carousel. Also, when we click on them, they open the Hyperlink.
Simply, envelope images with href tag. So, if we modify the example of the official documentation:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="http://estiloasertivo.blogspot.com.es/">
<img src="http://lh5.ggpht.com/-tNlXRzR4qMw/ThaowBgad2I/AAAAAAAAD6I/OEd6kbouBvk/s1600-h/chapi%25255B4%25255D.png" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor
id nibh ultricies vehicula ut id elit.</p>
</div>
</a>
</div>
<div class="item">
<a href="http://www.youtube.com/watch?v=Ehv0iriLTKE">
<img src="http://www.chistosos.com.mx/wp-content/uploads/2012/07/perro-gracioso-en-coche-aire-chistosa.jpg" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor
id nibh ultricies vehicula ut id elit.</p>
</div>
</a>
</div>
<div class="item">
<a href="http://www.google.cn/">
<img src="http://www.theandrewblog.net/wp-content/uploads/2012/04/ant.jpg" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Donec id elit non mi porta gravida at eget metus. Nullam id dolor
id nibh ultricies vehicula ut id elit.</p>
</div>
</a>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
Is it possible to have a tree structure with check boxes in JQuery MObile. I did not find any thing in demos.
I wanted something similar this image: Is there any alternative way we can achieve this?
Well it's just a concept but I have a couple working examples:
http://jsfiddle.net/JYn53/2/
http://jsfiddle.net/JYn53/4/
HTML
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed="true">
<h3>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
<label for="checkbox-1a">Cheetos</label>
</h3>
<p>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1aa" id="checkbox-1aa" class="custom" />
<label for="checkbox-1aa">Cheetos</label>
<input type="checkbox" name="checkbox-2aa" id="checkbox-2aa" class="custom" />
<label for="checkbox-2aa">Doritos</label>
<input type="checkbox" name="checkbox-3aa" id="checkbox-3aa" class="custom" />
<label for="checkbox-3aa">Fritos</label>
<input type="checkbox" name="checkbox-4aa" id="checkbox-4aa" class="custom" />
<label for="checkbox-4aa">Sun Chips</label>
</fieldset>
</div>
</p>
</div>
</div>
</div>