Push KIT

    
      
    

      
        Copy
      
      
    
  

    
      <div class="wrapper">
    <tui-push
        heading="Rachael"
        type="Replicant"
        class="push"
        [timestamp]="1661358075379"
        (close)="onClose()"
    >
        <tui-icon icon="@tui.settings" />
        Do you like our owl?
        <button
            tuiButton
            type="button"
        >
            It's artificial?
        </button>
        <button
            tuiLink
            type="button"
        >
            Nice hooters!
        </button>
    </tui-push>

    <tui-push
        heading="Deckard"
        type="Human?"
        class="push"
        [timestamp]="1661357000000"
    >
        <tui-icon
            icon="@tui.eye"
            class="human"
        />
        I've had people walk out on me before, but not when I was being so charming.
    </tui-push>
</div>

<tui-push
    heading="Roy"
    type="Replicant"
    (close)="onClose()"
>
    <img
        alt=""
        src="assets/images/roy.jpg"
    />
    <tui-icon icon="@tui.settings" />
    I’ve seen things you people wouldn't believe. Attack ships on fire off The Shoulder Of Orion. I watched C-Beams
    glitter in the dark near The Tannhauser Gate. All those moments will be lost in time, like tears in rain.
    <button
        tuiLink
        type="button"
    >
        Time to die
    </button>
</tui-push>

    

      
        Copy
      
      
    
  

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

:host {
    display: block;
}

.wrapper {
    box-shadow: var(--tui-shadow-small);
    inline-size: 22.5rem;
    max-inline-size: 100%;
    border-radius: var(--tui-radius-l);
    margin-block-end: 1rem;
    background: var(--tui-background-elevation-2);
}

.push {
    box-shadow: none;
}

.human {
    color: var(--tui-text-positive);
}

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <button
    tuiButton
    type="button"
    (click)="onClick()"
>
    Show push
</button>

    

      
        Copy
      
      
    
  

    
      
    

      
        Copy
      
      
    
  

    
      <button
    tuiButton
    type="button"
    (click)="toggle(true)"
>
    Show push
</button>

<tui-push
    *tuiPush="open"
    heading="Indiana Jones"
    type="Dr. Henry Walton Jones, Jr."
    (close)="toggle(false)"
>
    <tui-icon icon="@tui.message-square" />
    I have a bad feeling about this...
    <button
        tuiButton
        type="button"
        (click)="toggle(false)"
    >
        Fortune
    </button>
    <button
        tuiLink
        type="button"
        (click)="toggle(false)"
    >
        Glory
    </button>
</tui-push>

    

      
        Copy