Taiga UI 5.0 is out!

Resizer CDK

GitHub

Directive to resize container in multiple directions.

Basic

If you need to react to the new size somehow, you can subscribe to (tuiSizeChange) event of type [x: number, y: number]
[1, 1]
[0, 1]
[-1, 1]
[-1, 0]
[-1, -1]
[0, -1]
[1, -1]
[1, 0]
All 
    
      
    

      
      
    

  
    
      <div
    tuiResizable
    class="left-top item"
>
    [1, 1]
    <div
        class="right-bottom-handle handle"
        [tuiResizer]="[1, 1]"
    ></div>
</div>

<div
    tuiResizable
    class="top-middle item"
>
    [0, 1]
    <div
        class="top-middle-handle handle"
        [tuiResizer]="[0, 1]"
    ></div>
</div>

<div
    tuiResizable
    class="top-right item"
>
    [-1, 1]
    <div
        class="top-right-handle handle"
        [tuiResizer]="[-1, 1]"
    ></div>
</div>

<div
    tuiResizable
    class="middle-right item"
>
    [-1, 0]
    <div
        class="middle-right-handle handle"
        [tuiResizer]="[-1, 0]"
    ></div>
</div>

<div
    tuiResizable
    class="bottom-right item"
>
    [-1, -1]
    <div
        class="bottom-right-handle handle"
        [tuiResizer]="[-1, -1]"
    ></div>
</div>

<div
    tuiResizable
    class="middle-bottom item"
>
    [0, -1]
    <div
        class="middle-bottom-handle handle"
        [tuiResizer]="[0, -1]"
    ></div>
</div>

<div
    tuiResizable
    class="bottom-left item"
>
    [1, -1]
    <div
        class="bottom-left-handle handle"
        [tuiResizer]="[1, -1]"
    ></div>
</div>

<div
    tuiResizable
    class="left-middle item"
>
    [1, 0]
    <div
        class="left-middle-handle handle"
        [tuiResizer]="[1, 0]"
    ></div>
</div>

<div
    tuiResizable
    class="middle-middle item"
>
    All
    <div
        class="middle-middle-top-handle handle"
        [tuiResizer]="[0, -2]"
    ></div>
    <div
        class="middle-middle-right-handle handle"
        [tuiResizer]="[2, 0]"
    ></div>
    <div
        class="middle-middle-bottom-handle handle"
        [tuiResizer]="[0, 2]"
    ></div>
    <div
        class="middle-middle-left-handle handle"
        [tuiResizer]="[-2, 0]"
    ></div>
</div>

    

      
      
    

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

:host {
    position: relative;
    display: block;
    block-size: 30rem;
}

.item {
    position: absolute;
    display: flex;
    background: #87ceeb;
    align-items: center;
    text-align: center;
    justify-content: center;
    inline-size: 5rem;
    block-size: 5rem;
}

.handle {
    position: absolute;
    background: #ffc0cb;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    transform: inherit;
}

.left-top {
    inset-inline-start: 0;
    inset-block-start: 0;
}

.right-bottom-handle {
    inset-inline-end: 0;
    inset-block-end: 0;
}

.top-middle {
    .center-left();

    inset-block-start: 0;
}

.top-middle-handle {
    inset-inline-start: 50%;
    inset-block-end: 0;
}

.top-right {
    inset-block-start: 0;
    inset-inline-end: 0;
}

.top-right-handle {
    inset-inline-start: 0;
    inset-block-end: 0;
}

.middle-right {
    .center-top();

    inset-inline-end: 0;
}

.middle-right-handle {
    inset-inline-start: 0;
    inset-block-start: 50%;
}

.bottom-right {
    inset-block-end: 0;
    inset-inline-end: 0;
}

.bottom-right-handle {
    inset-inline-start: 0;
    inset-block-start: 0;
}

.middle-bottom {
    .center-left();

    inset-block-end: 0;
}

.middle-bottom-handle {
    inset-inline-start: 50%;
    inset-block-start: 0;
}

.bottom-left {
    inset-block-end: 0;
    inset-inline-start: 0;
}

.bottom-left-handle {
    inset-inline-end: 0;
    inset-block-start: 0;
}

.left-middle {
    inset-inline-start: 0;
    inset-block-start: 50%;
    transform: translateY(-50%);
}

.left-middle-handle {
    inset-inline-end: 0;
    inset-block-start: 50%;
}

.middle-middle {
    .center-all();
}

.middle-middle-top-handle {
    .center-left();

    inset-block-start: 0;
}

.middle-middle-right-handle {
    .center-top();

    inset-inline-end: 0;
}

.middle-middle-bottom-handle {
    .center-left();

    inset-block-end: 0;
}

.middle-middle-left-handle {
    .center-top();

    inset-inline-start: 0;
}
GitHub StackBlitz