ActiveZone CDK

    
      
    

      
        Copy
      
      
    
  

    
      <p>Parent zone: {{ parentActive }}</p>
<p>Child zone: {{ childActive }}</p>
<p>
    <input placeholder="input outside a zone" />
</p>
<div
    #parent="tuiActiveZone"
    class="active-zone"
    [class.active-zone_active]="parentActive"
    (tuiActiveZoneChange)="onParentActiveZone($event)"
>
    <h2>Parent zone</h2>
    <button
        tuiButton
        type="button"
    >
        A button inside zone
    </button>
</div>
<p>
    <button type="button">A button outside of zone</button>
</p>
<div
    class="active-zone"
    [class.active-zone_active]="childActive"
    [tuiActiveZoneParent]="parent"
    (tuiActiveZoneChange)="onChildActiveZone($event)"
>
    <h2>Child zone</h2>

    <tui-textfield>
        <label tuiLabel>Input inside zone</label>
        <input
            #input
            tuiInput
            [formControl]="control"
        />
    </tui-textfield>

    <p>
        You can bind different elements with
        <code>[tuiActiveZoneParent]</code>
        directive
    </p>
</div>
<p>
    <input placeholder="input outside zone" />
    <button
        type="button"
        (click)="onClick(input)"
    >
        Focus input in zone
    </button>
</p>
<p>Zone keeps active after browser tab change</p>

    

      
        Copy
      
      
    
  

    
      .active-zone {
    padding: 1.25rem;
    border: 2px solid;

    &_active {
        border-color: var(--tui-background-accent-1);
    }
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <p>Zone: {{ active }}</p>
<p>
    <tui-textfield>
        <label tuiLabel>I'm outside</label>
        <input tuiInput />
    </tui-textfield>
</p>
<div
    class="active-zone"
    [class.active-zone_active]="active"
    (tuiActiveZoneChange)="onZone($event)"
>
    <h2>Zone</h2>
    <button
        tuiButton
        type="button"
        (click)="onClick()"
    >
        Show dialog
    </button>
</div>
<p>
    <button
        tuiButton
        type="button"
    >
        I'm outside too
    </button>
</p>

    

      
        Copy
      
      
    
  

    
      .active-zone {
    padding: 1.25rem;
    border: 2px solid;

    &_active {
        border-color: var(--tui-background-accent-1);
    }
}

    

      
        Copy