Slug

Плагин Slug облегчит вам задачу создания красивых адресов из заданных строк.

Установка

Вы можете использовать этот плагин, включив его из тега <script> или установив с помощью менеджера пакетов.

Через CDN

Вы можете подключить CDN-сборку этого плагина с помощью тега <script>, только подключать нужно ДО основного JS-файла Alpine.

jsDelivr CDN

<!-- Slug Plugin -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs-slug@latest/dist/slug.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

unpkg CDN

<!-- Slug Plugin -->
<script defer src="https://unpkg.com/alpinejs-slug@latest/dist/slug.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs@3/dist/cdn.min.js"></script>

Через менеджер пакетов

Вы можете установить Slug для использования внутри вашей сборки следующим образом:

npm

npm i alpinejs-slug

pnpm

pnpm add alpinejs-slug

yarn

yarn add alpinejs-slug

Затем инициализируйте его в своей сборке:

import Alpine from 'alpinejs';
import slug from 'alpinejs-slug';

Alpine.plugin(slug);
Alpine.start();

Модификаторы

keep-case

Модификатор keep-case позволяет сохранять регистр слов в строке после преобразования в слаг.

Значение по умолчанию: false

<div x-data="{ title: 'Привет, Мир' }">
  <input type="text" x-model="title" />

  <input class="mt-2" type="text" x-slug.keep-case="title" />
</div>

replacement

Модификатор replacement отвечает за символ замены пробела.

Значение по умолчанию: -

<div x-data="{ title: 'Привет, Мир' }">
  <input type="text" x-model="title" />
  <p x-slug.replacement._="title"></p>
</div>

not-strict

Модификатор not-strict позволяет включить нестрогое преобразование. Например, при строгом преобразовании такие символы, как восклицательный знак, исчезают, а при нестрогом, наоборот, остаются.

Значение по умолчанию: false

<div x-data="{ title: 'Привет, Мир!' }">
  <input type="text" x-model="title" />
  <p x-slug.not-strict="title"></p>
</div>

untrimmed

По умолчанию любые пробелы вокруг преобразуемой строки просто исчезают. А при добавлении этого модификатора — заменяются на символ, указанный модификатором replacement.

Значение по умолчанию: false

<div x-data="{ title: ' Привет, Мир ' }">
  <input type="text" x-model="title" />
  <p x-slug.untrimmed="title"></p>
  <p x-slug.untrimmed.replacement._="title"></p>
</div>

locale

Вы можете задать преобразование конкретных символов в зависимости от локали. Текущий список поддерживаемых локалей и символов доступен по ссылке.

Значение по умолчанию: {}

<div x-data="{ title: 'Alpine JS! ♥' }">
  <input type="text" x-model="title" />
  <p x-slug="title"></p>
  <p x-slug.locale.de="title"></p>
</div>

lazy

Предотвращает изменение входного значения x-slug при загрузке страницы. Он будет меняться только при изменении входного x-slug, на который нацелен запрос.

Значение по умолчанию: false

<div x-data="{ title: 'Привет, Мир!' }">
  <input type="text" x-model="title" />
  <p x-slug.lazy="title"></p>
</div>