RTL-поддержка

Slim.js — это лёгкая и высокопроизводительная библиотека для построения компонентного интерфейса на JavaScript. Одной из важных задач современного фронтенд-разработчика является поддержка интерфейсов с различными направлениями текста, в частности RTL (Right-to-Left), используемыми в арабском, иврите и других языках. Slim.js предоставляет гибкие механизмы для интеграции RTL в компоненты без необходимости переписывать весь код.

Настройка направления текста

Направление текста задаётся через атрибут dir HTML-элемента. В Slim.js это можно реализовать несколькими способами:

  1. Через шаблон компонента
class MyComponent extends Slim {
  get template() {
    return `
      

        
Пример текста с поддержкой RTL

      

    `;
  }

  get is() { return 'my-component'; }

  onBeforeCreated() {
    this.direction = 'rtl'; // Значение может динамически изменяться
  }
}

customElements.define('my-component', MyComponent);

Особенности:

  • Атрибут dir влияет на все дочерние элементы.
  • Можно менять значение динамически через свойства компонента.

Динамическая смена направления

Slim.js поддерживает реактивные свойства, что позволяет менять направление текста на лету. Для этого используется обновление свойства и перерендеринг шаблона.

class DynamicDirectionComponent extends Slim {
  get template() {
    return `
      

        
        
Текст с динамическим направлением

      

    `;
  }

  get is() { return 'dynamic-direction'; }

  onBeforeCreated() {
    this.direction = 'ltr';
  }

  toggleDirection() {
    this.direction = this.direction === 'ltr' ? 'rtl' : 'ltr';
    this.update();
  }
}

Ключевые моменты:

  • @click используется для привязки событий прямо в шаблоне.
  • Метод update() принудительно инициирует повторный рендеринг.
  • Реактивность Slim.js обеспечивает автоматическое обновление при изменении свойств.

RTL и CSS-стили

Для корректного отображения интерфейсов с RTL важно учитывать не только атрибут dir, но и CSS-свойства. Основные правила:

.rtl-text {
  text-align: right;
  direction: rtl;
}

.ltr-text {
  text-align: left;
  direction: ltr;
}

В Slim.js можно подключать стили локально внутри компонента:

class StyledComponent extends Slim {
  get template() {
    return `
      
      

        
Текст с учётом направления

      

    `;
  }

  get is() { return 'styled-component'; }

  onBeforeCreated() {
    this.directionClass = 'rtl';
  }
}

Особенности:

  • Классы позволяют легко менять стиль без перезаписи атрибута dir.
  • Можно комбинировать динамическое изменение класса и свойства dir для сложных интерфейсов.

Работа с вложенными компонентами

При использовании компонентов внутри компонентов направление наследуется автоматически, если не указано иное:

class ParentComponent extends Slim {
  get template() {
    return `
      

        
      

    `;
  }
  get is() { return 'parent-component'; }
}

class ChildComponent extends Slim {
  get template() {
    return `
Вложенный текст
`;
  }
  get is() { return 'child-component'; }
}

Особенности:

  • Атрибут dir родителя задаёт направление для всех вложенных элементов.
  • Можно переопределять направление для отдельных дочерних компонентов.

Сочетание RTL с динамическим контентом

Для компонентов с динамическим контентом важно корректно обновлять направление после загрузки данных:

class MessagesComponent extends Slim {
  get template() {
    return `
      

        ${this.messages.map(msg => `
${msg}
`).join('')}
      

    `;
  }

  get is() { return 'messages-component'; }

  onBeforeCreated() {
    this.direction = 'ltr';
    this.messages = [];
  }

  loadMessages(data) {
    this.messages = data;
    this.update();
  }

  switchDirection() {
    this.direction = this.direction === 'ltr' ? 'rtl' : 'ltr';
    this.update();
  }
}

Особенности:

  • Метод update() гарантирует корректное отображение динамического контента с учётом текущего направления.
  • Комбинация реактивных свойств и шаблонной генерации позволяет легко поддерживать мультиязычные интерфейсы.

Вывод

Slim.js обеспечивает лёгкую интеграцию RTL-поддержки через сочетание атрибутов dir, реактивных свойств и локальных стилей. Динамическое управление направлением, наследование от родительских компонентов и правильное оформление CSS позволяют создавать гибкие и мультиязычные интерфейсы без сложных обходных решений.

Оглавление