AppBar LAYOUT

    
      
    

      
        Copy
      
      
    
  

    
      <h3>iOS</h3>
<section tuiPlatform="ios">
    <tui-app-bar>
        <button
            tuiButton
            tuiSlot="start"
            type="button"
        >
            Back
        </button>
        Taiga UI
        <button
            tuiButton
            tuiSlot="end"
            type="button"
        >
            Action
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        >
            Back
        </button>
        Taiga UI — Components library
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            title="Back"
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        ></button>
        Taiga UI
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>

    <tui-app-bar>
        <label tuiTitle>
            Taiga UI
            <span tuiSubtitle>Components library</span>
        </label>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        >
            Back
        </button>

        <div>
            <progress
                size="s"
                tuiProgressBar
                [max]="100"
                [value]="35"
            ></progress>
        </div>
    </tui-app-bar>
</section>

<h3 class="tui-space_top-8">Android</h3>
<section tuiPlatform="android">
    <tui-app-bar>
        Taiga UI
        <button
            tuiButton
            tuiSlot="end"
            type="button"
        >
            Action
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        >
            Back
        </button>
        Taiga UI — Components library
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            iconStart="@tui.x"
            title="Settings"
            tuiIconButton
            tuiSlot="start"
            type="button"
        ></button>
        Taiga UI
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            title="Back"
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        ></button>
        <label tuiTitle>
            Taiga UI
            <span tuiSubtitle>Components library</span>
        </label>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>
    <tui-app-bar>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        >
            Back
        </button>

        <progress
            size="s"
            tuiProgressBar
            [max]="100"
            [value]="35"
        ></progress>
    </tui-app-bar>
</section>

    

      
        Copy
      
      
    
  

    
      tui-app-bar {
    box-shadow: var(--tui-shadow-small);
    inline-size: 20rem;
    margin-block-end: 1rem;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-app-bar size="l">
    <button
        iconStart="@tui.chevron-left"
        tuiButton
        tuiSlot="start"
        type="button"
    >
        Action
    </button>
    Taiga UI
</tui-app-bar>

<tui-app-bar size="l">
    <label tuiTitle>
        Taiga UI
        <span tuiSubtitle>Components library</span>
    </label>
    <button
        tuiButton
        tuiSlot="end"
        type="button"
    >
        Action
    </button>
</tui-app-bar>

<tui-app-bar size="l">
    <button
        tuiButton
        tuiSlot="start"
        type="button"
    >
        Action
    </button>
    <label tuiTitle>
        Taiga UI is a very long title that should fade away
        <span tuiSubtitle>Components library</span>
    </label>
    <button
        iconStart="@tui.x"
        tuiIconButton
        tuiSlot="end"
        type="button"
    >
        Close
    </button>
</tui-app-bar>

<tui-app-bar size="l">
    <button
        iconStart="@tui.chevron-left"
        tuiIconButton
        tuiSlot="start"
        type="button"
    >
        Back
    </button>
    <progress
        size="s"
        tuiProgressBar
        [max]="100"
        [style.width.rem]="10"
        [value]="35"
    ></progress>
    <button
        tuiButton
        tuiSlot="end"
        type="button"
    >
        Action
    </button>
</tui-app-bar>

    

      
        Copy
      
      
    
  

    
      tui-app-bar {
    box-shadow: var(--tui-shadow-small);
    inline-size: 30rem;
    margin-block-end: 1rem;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <h3>Customization</h3>
<tui-app-bar>
    <progress
        size="s"
        tuiProgressBar
        [max]="100"
        [value]="35"
    ></progress>
</tui-app-bar>

<tui-app-bar class="gray">
    <button
        appearance=""
        tuiButton
        tuiSlot="start"
        type="button"
    >
        Back
    </button>
    <label tuiTitle>
        <span tuiSubtitle>More interesting title</span>
        Taiga UI
    </label>
    <button
        appearance=""
        tuiButton
        tuiSlot="end"
        type="button"
    >
        Accept
    </button>
</tui-app-bar>

<tui-app-bar class="black">
    <button
        appearance=""
        tuiButton
        tuiSlot="start"
        type="button"
    >
        Cancel
    </button>
    Taiga UI
    <button
        appearance=""
        iconStart="@tui.settings"
        title="Settings"
        tuiIconButton
        tuiSlot="end"
        type="button"
    ></button>
</tui-app-bar>

<h3 class="tui-space_top-8">Centered Android</h3>
<section tuiPlatform="android">
    <tui-app-bar>
        <label tuiTitle>Taiga UI</label>
        <button
            tuiButton
            tuiSlot="end"
            type="button"
        >
            Action
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        >
            Back
        </button>
        <label
            tuiFade
            tuiTitle
        >
            Taiga UI — Components library
        </label>
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            iconStart="@tui.x"
            title="Settings"
            tuiIconButton
            tuiSlot="start"
            type="button"
        ></button>
        <label tuiTitle>Taiga UI</label>
        <button
            iconStart="@tui.user"
            tuiIconButton
            tuiSlot="end"
            type="button"
        >
            User
        </button>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>

    <tui-app-bar>
        <button
            title="Back"
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        ></button>
        <label tuiTitle>
            Taiga UI
            <span tuiSubtitle>Components library</span>
        </label>
        <button
            iconStart="@tui.settings"
            title="Settings"
            tuiIconButton
            tuiSlot="end"
            type="button"
        ></button>
    </tui-app-bar>
</section>

    

      
        Copy
      
      
    
  

    
      @import '@taiga-ui/styles/utils.less';

tui-app-bar {
    box-shadow: var(--tui-shadow-small);
    inline-size: 20rem;
    margin-block-end: 1rem;
}

.gray {
    box-shadow: none;
    background: var(--tui-background-base-alt);

    button {
        color: var(--tui-text-primary);
    }
}

.black {
    color: var(--tui-background-base);
    background: var(--tui-text-primary);

    button {
        color: var(--tui-status-warning);
    }
}

section tui-app-bar [tuiTitle] {
    .center-all();

    text-align: center;
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <button
    size="m"
    tuiButton
    type="button"
    (click)="open(template)"
>
    Show
</button>

<ng-template
    #template
    let-observer
>
    <tui-app-bar tuiAppBarSize>
        <button
            tuiAppBarBack
            tuiSlot="start"
            type="button"
            [disabled]="!step"
            (click)="step = step - 1"
        >
            Back
        </button>
        <progress
            max="5"
            size="s"
            tuiProgressBar
            [style.width.rem]="8"
            [value]="step"
        ></progress>
        <button
            tuiButton
            tuiSlot="end"
            type="button"
            (click)="observer.complete()"
        >
            Close
        </button>
    </tui-app-bar>
    <h2 tuiHeader="h3">
        <span tuiTitle>I'm a stepper</span>
    </h2>
    <p
        appearance="floating"
        tuiCardLarge
    >
        Step {{ step }}
    </p>
    <button
        tuiButton
        type="button"
        [disabled]="step === 5"
        (click)="step = step + 1"
    >
        Next
    </button>
</ng-template>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <tui-segmented [(activeItemIndex)]="activeItemIndex">
    <button type="button">IOS</button>
    <button type="button">Android</button>
</tui-segmented>

<div
    tuiDynamicHeaderContainer
    class="container"
    [tuiPlatform]="activeItemIndex ? 'android' : 'ios'"
>
    <tui-app-bar>
        <button
            title="Back"
            tuiAppBarBack
            tuiSlot="start"
            type="button"
        ></button>
        <div tuiDynamicHeader></div>
    </tui-app-bar>
    <div class="content">
        <div
            *tuiDynamicHeaderAnchor
            tuiHeader="h6"
        >
            <h6 tuiTitle>
                Title 1
                <div tuiSubtitle>Subtitle</div>
            </h6>
        </div>
        @for (_ of '-'.repeat(7); track $index) {
            <div tuiCell>
                <div
                    appearance="primary"
                    tuiAvatar="@tui.star"
                ></div>
                <div tuiTitle>
                    Title
                    <div tuiSubtitle>Description</div>
                </div>
            </div>
        }

        <div
            *tuiDynamicHeaderAnchor
            tuiHeader="h6"
        >
            <h6 tuiTitle>Title 2</h6>
        </div>
        @for (_ of '-'.repeat(15); track $index) {
            <div tuiCell>
                <div
                    appearance="secondary"
                    tuiAvatar="@tui.heart"
                ></div>
                <div tuiTitle>
                    Title
                    <div tuiSubtitle>Description</div>
                </div>
            </div>
        }

        <div
            *tuiDynamicHeaderAnchor
            tuiHeader="h6"
        >
            <h6 tuiTitle>Title 3 Long title</h6>
        </div>
        @for (_ of '-'.repeat(15); track $index) {
            <div tuiCell>
                <div
                    appearance="secondary"
                    tuiAvatar="@tui.heart"
                ></div>
                <div tuiTitle>
                    Title
                    <div tuiSubtitle>Description</div>
                </div>
            </div>
        }
    </div>
</div>

    

      
        Copy
      
      
    
  

    
      .container {
    max-block-size: 30rem;
    inline-size: 20rem;
    overflow: scroll;
    overscroll-behavior: none;
}

tui-app-bar {
    position: sticky;
    z-index: 1;
    inset-block-start: -1px;
    background: var(--tui-background-base);
}

tui-segmented {
    inline-size: 6rem;
    margin-block-end: 1rem;
}

.content > [tuiHeader] {
    padding: 0 1rem;
}

    

      
        Copy