ElasticContainer LAYOUT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis ipsum in elit mattis consectetur. Maecenas venenatis ligula libero, lobortis rhoncus eros aliquam a. Vivamus blandit scelerisque urna, eu euismod ipsum ultricies non. Aenean fringilla tincidunt luctus. Phasellus eleifend a enim vel aliquet. Donec accumsan orci ac nunc suscipit posuere in a turpis. Fusce hendrerit in lectus eu egestas.

    
      <tui-elastic-container>
    {{ current }}
    <button
        tuiLink
        type="button"
        (click)="toggle()"
    >
        Show {{ current === more ? 'less' : 'more' }}
    </button>
</tui-elastic-container>

contenteditable

Editable content

    
      <tui-elastic-container class="container">
    <div
        contenteditable
        class="editable"
    >
        Editable content
    </div>
</tui-elastic-container>

    
      .container {
    border: 2px solid var(--tui-text-tertiary);
    overflow: visible;

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

.editable {
    outline: none;
    padding: 1rem;
}

Add and remove content

I'm content

    
      <tui-elastic-container class="visible">
    @for (_ of '-'.repeat(content); track $index) {
        <div class="tui-space_bottom-4">I'm content</div>
    }
    <button
        size="s"
        tuiButton
        type="button"
        class="tui-space_right-2"
        (click)="add()"
    >
        Add content
    </button>
    <button
        size="s"
        tuiButton
        type="button"
        (click)="remove()"
    >
        Remove content
    </button>
</tui-elastic-container>

    
      .visible {
    overflow: visible;
}

With animations inside

Nested form

Some input

Nested form

Some input

    
      <button
    size="s"
    tuiButton
    type="button"
    (click)="add()"
>
    Add item
</button>
<tui-elastic-container class="tui-space_top-4">
    @for (item of items; track item) {
        <div class="wrapper">
            <h3 class="title">
                <button
                    appearance="secondary"
                    size="s"
                    tuiIconButton
                    type="button"
                    class="tui-space_right-2"
                    [style.border-radius.%]="100"
                    [tuiChevron]="item.expanded"
                    (click)="item.expanded = !item.expanded"
                >
                    Expand
                </button>
                Nested form
                <button
                    appearance="flat"
                    iconStart="@tui.trash"
                    size="s"
                    tuiIconButton
                    type="button"
                    class="remove"
                    [style.border-radius.%]="100"
                    (click)="remove($index)"
                >
                    Remove
                </button>
            </h3>
            <tui-expand [expanded]="item.expanded">
                <tui-textfield class="tui-space_top-4">
                    <input
                        tuiInput
                        [(ngModel)]="item.value"
                    />
                    <label tuiLabel>Some input</label>
                </tui-textfield>
            </tui-expand>
        </div>
    }
</tui-elastic-container>

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

.wrapper:not(:last-child) {
    margin-block-end: 1rem;
}

.title {
    display: flex;
    align-items: center;
    margin: 0;
}

.remove {
    margin-inline-start: auto;
}