Загрузка Ajax

ajaxload
sm
md
lg
xl

Использование Ajax позволит вам обновлять необходимую часть страницы без перезагрузки.

Наименование data-атрибуты Описание Значение по умолчанию
Инициализация data-ajaxload Указывает на то, что в месте его указания будет загружен контент Без значения/loaded
Путь к файлу sf-src Указывает на то, что в значении параметра будет указан путь (url) к файлу с информацией 'error src'
Путь к файлу data-canseltrack Если содержимое загружено не отслеживать Без значения

Загрузка неактивной страницы

1 
<div class="sf-tab">
	<nav>
		<ul class="list-none p-0 m-0 flex">
			<li class="hidden>block block>hidden">
				<div class="block p-1 bg-surface-0 border-bottom-1 border-right-1 border-surface-container cursor-pointer">
					Страница 1 (неактивная)
				</div>
				<div class="hidden p-1 bg-theme-1 bg-primary color-on-surface-inverse">
					<i class="fa fa-home fa-fw m-right-1/2" aria-hidden="true"></i>
					Страница 1 (активная)
				</div>
			</li>
			<li>
				<div class="block p-1 bg-surface-0 border-bottom-1 border-right-1 border-surface-container cursor-pointer">
					Страница 2 (неактивная)
				</div>
				<div class="hidden p-1 bg-theme-1 bg-primary color-on-surface-inverse">
					Страница 2 (активная)
				</div>
			</li>
			<li>
				<div class="block p-1 bg-surface-0 border-bottom-1 border-surface-container cursor-pointer">
					Страница 3 (неактивная)
				</div>
				<div class="hidden p-1 bg-theme-1 bg-primary color-on-surface-inverse">
					Страница 3 (активная)
				</div>
			</li>
		</ul>
	</nav>
	<div class="sf-tab-content p-1 bg-surface-0 relative">
		<section class="block" sf-ajaxload sf-src="/ru/modal/default.php" sf-canceltrack>
			1
		</section>
		<section class="hidden" sf-ajaxload sf-src="/ru/modal/default.php" sf-canceltrack>
			2
		</section>
		<section class="hidden" sf-ajaxload sf-src="/ru/modal/default.php" sf-canceltrack>
			3
		</section>
	</div>
</div>

Загрузка Ajax в элемент по событию

Нажать 
<a sf-src="/ru/modal/default.php" sf-canceltrack href="javascript:void(0)" id="#ajaxload">
	Нажать
</a>

Адаптивность

Для установки адаптивности элементов компонентов, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью