import{b as m}from"./Utilities-Jli9PXBn.js";function v(){return` 
<div class="inail-tab">
    <ul class="nav nav-pills" role="tablist">
        <li role="tab" class="active col-xs-6">
            <a data-toggle="pill" href="#tab1" aria-expanded="true">
                <span class="labelTabTitle">Tab 1</span>
            </a>
        </li>
        <li role="tab" class="col-xs-6">
            <a data-toggle="pill" href="#tab2" aria-expanded="false">
                <span class="labelTabTitle">Tab 2</span>
            </a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab-pane in active">
            <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-1 ">
                <div class="row">
                    <div class="col-xs-12 inail-tab-title mb-3">TITOLO TAB 1</div>
                    <div class="col-xs-12 inail-tab-subtitle mb-3">Sottotitolo</div>
                </div>
                <div class="row ">
                    <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3"> Descrizione lorem ispum
                        dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae
                        lacus, gravida tortor vehicula, eu non urna. </div>
                    <div class="form-group col-xs-12 col-md-6 col-lg-6 ">
                        <label class="control-label  inail-label" for="input-filtro-tab-1-">Input 1</label>
                        <input type="text" class="form-control inail-input" id="input-filtro-tab-1-"
                            placeholder="placeholder">
                    </div>
                    <div class="form-group  col-xs-12 col-md-6 col-lg-6">
                        <label class="inail-label">LABEL</label>
                        <select class="form-control inail-input form-select" aria-label="Select">
                            <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
                            <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
                            <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
                            <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
                        </select>
                    </div>
                </div>
                <div class="row marginTop">
                    <div class="col-xs-12 pull right">
                        <button type="reset" class="inail-button inail-button-secondary">Annulla</button>
                        <button type="submit" class="inail-button inail-button-primary ml-3 mt-2"
                            type="button">Conferma</button>
                    </div>
                </div>
            </form>
        </div>
        <div id="tab2" class="tab-pane">
            <form class="form-group form-grey row" action="#" name="filterForm" id="filtro-complesso-2">
                <div class="row">
                    <div class="col-xs-12 inail-tab-title mb-3">TITOLO TAB 1</div>
                    <div class="col-xs-12 inail-tab-subtitle mb-3">Sottotitolo</div>
                </div>
                <div class="row">
                    <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3"> Descrizione lorem ispum
                        dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae
                        lacus, gravida tortor vehicula, eu non urna. </div>
                    <div class="form-group col-xs-12 col-md-4 col-lg-4">
                        <label class="control-label  inail-label" for="input-filtro-tab-1-">Input 1</label>
                        <input type="text" class="form-control inail-input" id="input-filtro-tab-1-"
                            placeholder="placeholder">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                        <div class="form-group date datePicker ">
                            <div class="input-relative">
                                <label class="control-label inail-label" for="form-data-2">Periodo Dal</label>
                                <input id="form-data-2" class="form-control inail-input" title="GG/MM/AAAA"
                                    placeholder="gg / mm / aaaa" type="text">
                                <button title="Calendario" class="inail-button-calendar" type="button">
                                    <em class="fa-regular fa-calendar" aria-hidden="true"></em>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                        <div class="form-group date datePicker ">
                            <div class="input-relative">
                                <label class="control-label inail-label" for="form-data-3">Periodo Al</label>
                                <input id="form-data-3" class="form-control inail-input" title="GG/MM/AAAA"
                                    placeholder="gg / mm / aaaa" type="text">
                                <button title="Calendario" class="inail-button-calendar" type="button">
                                    <em class="fa-regular fa-calendar" aria-hidden="true"></em>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row marginTop">
                    <div class="col-xs-12 pull right">
                        <button type="reset" class="inail-button inail-button-secondary">Annulla</button>
                        <button type="submit" class="inail-button inail-button-primary ml-3 mt-2"
                            type="button">Conferma</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
`}function f(){return`<div class="inail-tab-portale">
		
		<ul class="nav nav-tabs default-tabs exp-tabs" role="tablist">
	
			<li role="tab">
				<a data-toggle="tab" href="#expandable-tab11" aria-expanded="false">
					
					<span class="labelTabTitle mr-4">TAB 1</span>
					<em class="fa fa-chevron-down" aria-hidden="true"></em>
				</a>
			</li>
			<li role="tab">
				<a data-toggle="tab" href="#expandable-tab12" aria-expanded="false">
					
					<span class="labelTabTitle mr-4">TAB 2</span>
					<em class="fa fa-chevron-down " aria-hidden="true"></em>
				</a>
			</li>
			<li  role="tab">
				<a data-toggle="tab" href="#expandable-tab13"  aria-expanded="false">
					
					<span class="labelTabTitle mr-4">TAB 3</span>
					<em class="fa fa-chevron-down " aria-hidden="true"></em>
				</a>
			</li>
	
		</ul>
		
		<div class="tab-content">
	 <div id="expandable-tab11" class="tab-pane">
      <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-11">
        <div class="row">
          <div class="col-xs-12 inail-tab-title mb-3">TITOLO TAB 1</div>
          <div class="col-xs-12 inail-tab-subtitle mb-3">Sottotitolo</div>
        </div>
        <div class="row ">
		          <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
				  Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
				  </div>
          <div class="form-group col-xs-12 col-md-6 col-lg-6 ">
            <label class="control-label  inail-label" for="input-filtro-tab-1-">Input 1</label>
            <input type="text" class="form-control inail-input" id="input-filtro-tab-1-" placeholder="placeholder">
          </div>

          <div class="form-group  col-xs-12 col-md-6 col-lg-6">
	         <label class="inail-label">LABEL</label>
	          <select class="form-control inail-input form-select" aria-label="Select">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
          </div>
      
        </div>
        <div class="row marginTop">
		<div class="col-xs-12 pull right">
		<button type="reset" class="inail-button inail-button-secondary">Annulla</button>
		
		
		<button type="submit" class="inail-button inail-button-primary ml-3 mt-2" type="button">Conferma</button>
		</div>
          
        </div>
      </form>
    </div>
			
		 <div id="expandable-tab12" class="tab-pane">
      <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-12">
        <div class="row">
          <div class="col-xs-12 inail-tab-title mb-3">TITOLO TAB 2</div>
          <div class="col-xs-12 inail-tab-subtitle mb-3">Sottotitolo</div>
        </div>
        <div class="row ">
		          <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
				  Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
				  </div>
          <div class="form-group col-xs-12 col-md-6 col-lg-6 ">
            <label class="control-label  inail-label" for="input-filtro-tab-1-">Input 1</label>
            <input type="text" class="form-control inail-input" id="input-filtro-tab-1-" placeholder="placeholder">
          </div>

          <div class="form-group  col-xs-12 col-md-6 col-lg-6">
	         <label class="inail-label">LABEL</label>
	          <select class="form-control inail-input form-select" aria-label="Select">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
          </div>
      
        </div>
        <div class="row marginTop">
		<div class="col-xs-12 pull right">
		<button type="reset" class="inail-button inail-button-secondary">Annulla</button>
		
		
		<button type="submit" class="inail-button inail-button-primary ml-3 mt-2" type="button">Conferma</button>
		</div>
          
        </div>
      </form>
    </div>
			
			 <div id="expandable-tab13" class="tab-pane">
      <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-13">
        <div class="row">
          <div class="col-xs-12 inail-tab-title mb-3">TITOLO TAB 3</div>
          <div class="col-xs-12 inail-tab-subtitle mb-3">Sottotitolo</div>
        </div>
        <div class="row ">
		          <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
				  Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
				  </div>
          <div class="form-group col-xs-12 col-md-6 col-lg-6 ">
            <label class="control-label  inail-label" for="input-filtro-tab-1-">Input 1</label>
            <input type="text" class="form-control inail-input" id="input-filtro-tab-1-" placeholder="placeholder">
          </div>

          <div class="form-group  col-xs-12 col-md-6 col-lg-6">
	         <label class="inail-label">LABEL</label>
	          <select class="form-control inail-input form-select" aria-label="Select">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
          </div>
      
        </div>
        <div class="row marginTop">
		<div class="col-xs-12 pull right">
		<button type="reset" class="inail-button inail-button-secondary">Annulla</button>
		
		
		<button type="submit" class="inail-button inail-button-primary ml-3 mt-2" type="button">Conferma</button>
		</div>
          
        </div>
      </form>
    </div>
				
			</div>
	
	
	
		</div>	
	</div>








	
	<div class="inail-tab-portale mt-4">
		
		<ul class="nav nav-tabs default-tabs exp-tabs" role="tablist">
	
			<li role="tab">
				<a data-toggle="tab" href="#expandable-tab11a" aria-expanded="false">
					

				<span class="labelTabTitle mr-4">TAB A</span>
<em class="fa fa-chevron-down" aria-hidden="true"></em>
				</a>
			</li>
			<li role="tab">
				<a data-toggle="tab" href="#expandable-tab12a" aria-expanded="false">
					

				<span class="labelTabTitle mr-4">TAB B</span>
<em class="fa fa-chevron-down" aria-hidden="true"></em>
				</a>
			</li>
			<li role="tab">
				<a data-toggle="tab" href="#expandable-tab13a"  aria-expanded="false">
					

				<span class="labelTabTitle mr-4">TAB C</span>
<em class="fa fa-chevron-down" aria-hidden="true"></em>
				</a>
			</li>
	
		</ul>
		
		<div class="tab-content">
	
			 <div id="expandable-tab11a" class="tab-pane">
      <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-11a">
        <div class="row">
          <div class="col-xs-12 inail-tab-title mb-3">TITOLO TAB A</div>
          <div class="col-xs-12 inail-tab-subtitle mb-3">Sottotitolo</div>
        </div>
        <div class="row ">
		          <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
				  Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
				  </div>
          <div class="form-group col-xs-12 col-md-6 col-lg-6 ">
            <label class="control-label  inail-label" for="input-filtro-tab-1-">Input 1</label>
            <input type="text" class="form-control inail-input" id="input-filtro-tab-1-" placeholder="placeholder">
          </div>

          <div class="form-group  col-xs-12 col-md-6 col-lg-6">
	         <label class="inail-label">LABEL</label>
	          <select class="form-control inail-input form-select" aria-label="Select">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
          </div>
      
        </div>
        <div class="row marginTop">
		<div class="col-xs-12 pull right">
		<button type="reset" class="inail-button inail-button-secondary">Annulla</button>
		
		
		<button type="submit" class="inail-button inail-button-primary ml-3 mt-2" type="button">Conferma</button>
		</div>
          
        </div>
      </form>
    </div>
			
			 <div id="expandable-tab12a" class="tab-pane">
      <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-12a">
        <div class="row">
          <div class="col-xs-12 inail-tab-title mb-3">TITOLO TAB B</div>
          <div class="col-xs-12 inail-tab-subtitle mb-3">Sottotitolo</div>
        </div>
        <div class="row ">
		          <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
				  Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
				  </div>
          <div class="form-group col-xs-12 col-md-6 col-lg-6 ">
            <label class="control-label  inail-label" for="input-filtro-tab-1-">Input 1</label>
            <input type="text" class="form-control inail-input" id="input-filtro-tab-1-" placeholder="placeholder">
          </div>

          <div class="form-group  col-xs-12 col-md-6 col-lg-6">
	         <label class="inail-label">LABEL</label>
	          <select class="form-control inail-input form-select" aria-label="Select">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
          </div>
      
        </div>
        <div class="row marginTop">
		<div class="col-xs-12 pull right">
		<button type="reset" class="inail-button inail-button-secondary">Annulla</button>
		
		
		<button type="submit" class="inail-button inail-button-primary ml-3 mt-2" type="button">Conferma</button>
		</div>
          
        </div>
      </form>
    </div>


			 <div id="expandable-tab13a" class="tab-pane">
      <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-13a">
        <div class="row">
          <div class="col-xs-12 inail-tab-title mb-3">TITOLO TAB C</div>
          <div class="col-xs-12 inail-tab-subtitle mb-3">Sottotitolo</div>
        </div>
        <div class="row ">
		          <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
				  Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
				  </div>
          <div class="form-group col-xs-12 col-md-6 col-lg-6 ">
            <label class="control-label  inail-label" for="input-filtro-tab-1-">Input 1</label>
            <input type="text" class="form-control inail-input" id="input-filtro-tab-1-" placeholder="placeholder">
          </div>

          <div class="form-group  col-xs-12 col-md-6 col-lg-6">
	         <label class="inail-label">LABEL</label>
	          <select class="form-control inail-input form-select" aria-label="Select">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
          </div>
      
        </div>
        <div class="row marginTop">
		<div class="col-xs-12 pull right">
		<button type="reset" class="inail-button inail-button-secondary">Annulla</button>
		
		
		<button type="submit" class="inail-button inail-button-primary ml-3 mt-2" type="button">Conferma</button>
		</div>
          
        </div>
      </form>
    </div>
	
	
	
		</div>	
	</div>`}function g(){return`	<div class="inail-tab-portale">
	<ul class="nav nav-tabs default-tabs" role="tablist">
		<li role="tab" class="active">
			<a data-toggle="tab" href="#tab11" aria-expanded="true">
				<span class="labelTabTitle">Tab 1</span>
			</a>
		</li>
		<li role="tab">
			<a data-toggle="tab" href="#tab12" aria-expanded="false">
				<span class="labelTabTitle">Tab 2</span>
			</a>
		</li>
		<li role="tab">
			<a data-toggle="tab" href="#tab13"  aria-expanded="false">
				<span class="labelTabTitle">Tab 3</span>
			</a>
		</li>
	</ul>
	<div class="tab-content">
		 <div id="tab11" class="tab-pane in active">
      <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-1 ">
        <div class="row">
          <div class="col-xs-12 inail-tab-title mb-3">TITOLO TAB 1</div>
          <div class="col-xs-12 inail-tab-subtitle mb-3">Sottotitolo</div>
        </div>
        <div class="row ">
		          <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
				  Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
				  </div>
          <div class="form-group col-xs-12 col-md-6 col-lg-6 ">
            <label class="control-label  inail-label" for="input-filtro-tab-1-">Input 1</label>
            <input type="text" class="form-control inail-input" id="input-filtro-tab-1-" placeholder="placeholder">
          </div>

          <div class="form-group  col-xs-12 col-md-6 col-lg-6">
	         <label class="inail-label">LABEL</label>
	          <select class="form-control inail-input form-select" aria-label="Select">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
          </div>
      
        </div>
        <div class="row marginTop">
		<div class="col-xs-12 pull right">
		<button type="reset" class="inail-button inail-button-secondary">Annulla</button>
		
		
		<button type="submit" class="inail-button inail-button-primary ml-3 mt-2" type="button">Conferma</button>
		</div>
          
        </div>
      </form>
    </div>
			 <div id="tab12" class="tab-pane">
      <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-1">
        <div class="row">
          <div class="col-xs-12 inail-tab-title mb-3">TITOLO TAB 2</div>
          <div class="col-xs-12 inail-tab-subtitle mb-3">Sottotitolo</div>
        </div>
        <div class="row ">
		          <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
				  Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
				  </div>
          <div class="form-group col-xs-12 col-md-6 col-lg-6 ">
            <label class="control-label  inail-label" for="input-filtro-tab-1-">Input 1</label>
            <input type="text" class="form-control inail-input" id="input-filtro-tab-1-" placeholder="placeholder">
          </div>

          <div class="form-group  col-xs-12 col-md-6 col-lg-6">
	         <label class="inail-label">LABEL</label>
	          <select class="form-control inail-input form-select" aria-label="Select">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
          </div>
      
        </div>
        <div class="row marginTop">
		<div class="col-xs-12 pull right">
		<button type="reset" class="inail-button inail-button-secondary">Annulla</button>
		
		
		<button type="submit" class="inail-button inail-button-primary ml-3 mt-2" type="button">Conferma</button>
		</div>
          
        </div>
      </form>
    </div>
				 <div id="tab13" class="tab-pane">
      <form class="form-group form-grey" action="#" name="filterForm" id="filtro-tab-1">
        <div class="row">
          <div class="col-xs-12 inail-tab-title mb-3">TITOLO TAB 3</div>
          <div class="col-xs-12 inail-tab-subtitle mb-3">Sottotitolo</div>
        </div>
        <div class="row ">
		          <div class=" col-xs-12 col-md-12 col-lg-12 inail-tab-description mb-3">
				  Descrizione lorem ispum dolor sit amet massa vitae lacus, gravida tortor vehicula, eu non urna. sit amet massa vitae lacus, gravida tortor vehicula, eu non urna.
				  </div>
          <div class="form-group col-xs-12 col-md-6 col-lg-6 ">
            <label class="control-label  inail-label" for="input-filtro-tab-1-">Input 1</label>
            <input type="text" class="form-control inail-input" id="input-filtro-tab-1-" placeholder="placeholder">
          </div>

          <div class="form-group  col-xs-12 col-md-6 col-lg-6">
	         <label class="inail-label">LABEL</label>
	          <select class="form-control inail-input form-select" aria-label="Select">
		         <option value="..." aria-label="seleziona opzione">- seleziona opzione -</option>
		         <option value="Opzione 1" aria-label="Opzione 1">Opzione 1</option>
		         <option value="Opzione 2" aria-label="Opzione 2">Opzione 2</option>
		         <option value="Opzione 3" aria-label="Opzione 3">Opzione 3</option>
	          </select>
          </div>
      
        </div>
        <div class="row marginTop">
		<div class="col-xs-12 pull right">
		<button type="reset" class="inail-button inail-button-secondary">Annulla</button>
		
		
		<button type="submit" class="inail-button inail-button-primary ml-3 mt-2" type="button">Conferma</button>
		</div>
          
        </div>
      </form>
    </div>
				</div>
			</div>`}const z=`Un Tab è un controllo grafico di navigazione che permette all'utente di muoversi da un gruppo di contenuti ad un altro. I tab sono rappresentati graficamente come dei rettangoli che contengono una breve label.

L'attivazione di un tab rende visibili i contenuti ad esso associati e contemporaneamente viene evidenziata la sua attivazione. Può essere attivato un solo tab alla volta.

Sono posti immediatamente sopra all'area soggetta alla navigazione in posizione orizzontale. `,O={title:"Componenti/Box e Tab/Tab",tags:["autodocs"],parameters:{docs:{story:{inline:!1,iframeHeight:700},description:{component:`Un Tab è un controllo grafico di navigazione che permette all'utente di muoversi da un gruppo di contenuti ad un altro. I tab<br />sono rappresentati graficamente come dei rettangoli che contengono una breve label.<br /><br />L'attivazione di un tab rende visibili i contenuti ad esso associati e contemporaneamente viene evidenziata la sua attivazione.<br />Può essere attivato un solo tab alla volta.<br /><br/>
        Sono posti immediatamente sopra all'area soggetta alla navigazione in posizione orizzontale. `},mdxPage:z,showCode:!0}},decorators:[(o,t)=>m(o,t,3,["static-webkit/js/custom-webkit.js","static/js/main.js","static-webkit/js/expandableTabs.js"],!0),o=>`<main id="contenutoPrincipale">${o()}</main>`]},a={render:()=>v()},l={render:()=>g()},i={name:"Tabs espandibili",render:()=>f()};var e,n,s;a.parameters={...a.parameters,docs:{...(e=a.parameters)==null?void 0:e.docs,source:{originalSource:`{
  render: () => {
    return createTab1();
  }
}`,...(s=(n=a.parameters)==null?void 0:n.docs)==null?void 0:s.source}}};var r,c,d;l.parameters={...l.parameters,docs:{...(r=l.parameters)==null?void 0:r.docs,source:{originalSource:`{
  render: () => {
    return createTab2();
  }
}`,...(d=(c=l.parameters)==null?void 0:c.docs)==null?void 0:d.source}}};var p,b,u;i.parameters={...i.parameters,docs:{...(p=i.parameters)==null?void 0:p.docs,source:{originalSource:`{
  name: "Tabs espandibili",
  render: () => {
    return createExpandableTabs();
  }
}`,...(u=(b=i.parameters)==null?void 0:b.docs)==null?void 0:u.source}}};const T=["Tab1","Tab2","ExpandableTab"];export{i as ExpandableTab,a as Tab1,l as Tab2,T as __namedExportsOrder,O as default};
