Entegrasyonlar

TRDS tek bir çekirdek üzerine kurulur. Her entegrasyon o çekirdeği sarar ve kendi iş mantığını taşımaz. Aynı HTML her yerde üretilir, böylece erişilebilirlik davranışı teknolojiye göre değişmez.

Sıra. Bir bileşen önce HTML ve CSS olarak yayımlanır. React ve diğer saramalar ondan sonra gelir. JavaScript çalışmadığında hizmet çalışmaya devam eder.

Bileşen ve teknoloji tablosu

Bir ekip bu tabloya bakar ve seçtiği teknolojide hangi bileşenin hazır olduğunu görür. Yöntem İrlanda tasarım sisteminden alındı. 116 satır.

kararlı: Üretimde kullanın.
beta: Uygulandı, küçük değişiklik olabilir.
değerlendiriliyor: Yol haritasında.
gerekmiyor: O katmana gerek yok.

Her bileşenin her teknolojideki durumu
Bileşen	Grup	HTML ve CSS	JavaScript	React	Vue
Açılır bilgi	Geri bildirim	kararlı	aç ve kapat	kararlı	kararlı
Açılır liste	Form	kararlı	gerekmiyor	kararlı	kararlı
Adet seçici	Form	kararlı	artır, azalt	kararlı	kararlı
Adım göstergesi	Gezinme	kararlı	gerekmiyor	kararlı	kararlı
Adres TR	Türkiye’ye özgü form	kararlı	bağlı listeler	kararlı	kararlı
Akordiyon	Yerleşim	kararlı	aç ve kapat	kararlı	kararlı
Alan grubu	Form	kararlı	gerekmiyor	kararlı	kararlı
Alıntı	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Alt bilgi	Kimlik	kararlı	gerekmiyor	kararlı	kararlı
Alt gezinme	Gezinme	kararlı	gerekmiyor	kararlı	kararlı
Anahtar	Seçim	kararlı	gerekmiyor	kararlı	kararlı
Aralık seçici	Form	kararlı	değer gösterimi	kararlı	kararlı
Arama	Gezinme	kararlı	öneri listesi	kararlı	kararlı
Aranabilir liste	Seçim	kararlı	süzme ve klavye	kararlı	kararlı
Aşama afişi	Kimlik	kararlı	gerekmiyor	kararlı	kararlı
Avatar	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Ayraç	Yerleşim	kararlı	gerekmiyor	kararlı	kararlı
Ayrıntılar	Yerleşim	kararlı	gerekmiyor	kararlı	kararlı
Bağlantı	Eylem	kararlı	gerekmiyor	kararlı	kararlı
Başa dön	Gezinme	kararlı	görünürlük	kararlı	kararlı
Başlık	Kimlik	kararlı	mobil menü	kararlı	kararlı
Bildirim afişi	Geri bildirim	kararlı	gerekmiyor	kararlı	kararlı
Bilgi kutusu	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Bölüm	Yerleşim	kararlı	gerekmiyor	kararlı	kararlı
Bölümlü seçim	Seçim	kararlı	gerekmiyor	kararlı	kararlı
Çerez bildirimi	Kimlik	kararlı	tercih saklama	kararlı	kararlı
Çok satırlı metin	Form	kararlı	karakter sayacı	kararlı	kararlı
Çoklu seçim	Seçim	kararlı	süzme, seçim etiketi	kararlı	kararlı
Dil seçici	Gezinme	kararlı	gerekmiyor	kararlı	kararlı
Dosya yükleme	Form	kararlı	sürükle, listele, kaldır	kararlı	kararlı
Düğme	Eylem	kararlı	gerekmiyor	kararlı	kararlı
e-Devlet ile giriş TR	Türkiye’ye özgü hizmet	kararlı	gerekmiyor	kararlı	kararlı
E-posta girişi	Form	kararlı	gerekmiyor	kararlı	kararlı
Erişilebilirlik menüsü TR	Türkiye’ye özgü hizmet	kararlı	ayar saklama	kararlı	kararlı
Etiket	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Eylem menüsü	Eylem	kararlı	klavye desteği	kararlı	kararlı
Geçici bildirim	Geri bildirim	kararlı	kapatma ve süre	kararlı	kararlı
Geniş menü	Gezinme	kararlı	aç ve kapat	kararlı	kararlı
Geri bağlantısı	Gezinme	kararlı	gerekmiyor	kararlı	kararlı
Girdi grubu	Form	kararlı	gerekmiyor	kararlı	kararlı
Girdi maskesi	Form	kararlı	biçimlendirme	kararlı	kararlı
Görev listesi	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Görsel	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Hata mesajı	Geri bildirim	kararlı	gerekmiyor	kararlı	kararlı
Hata özeti	Geri bildirim	kararlı	odak yönetimi	kararlı	kararlı
Hizmet gezinmesi	Gezinme	kararlı	gerekmiyor	kararlı	kararlı
IBAN girişi TR	Türkiye’ye özgü form	kararlı	doğrulama	kararlı	kararlı
Izgara	Yerleşim	kararlı	gerekmiyor	kararlı	kararlı
İçeriğe atlama bağlantısı	Gezinme	kararlı	gerekmiyor	kararlı	kararlı
İlerleme çubuğu	Geri bildirim	kararlı	gerekmiyor	kararlı	kararlı
İndirme bağlantısı	Eylem	kararlı	gerekmiyor	kararlı	kararlı
İpucu	Geri bildirim	kararlı	göster ve gizle	kararlı	kararlı
İskelet	Geri bildirim	kararlı	gerekmiyor	kararlı	kararlı
İstatistik kutusu	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Kap	Yerleşim	kararlı	gerekmiyor	kararlı	kararlı
Karo	Yerleşim	kararlı	gerekmiyor	kararlı	kararlı
Karşılama bloğu	Yerleşim	kararlı	gerekmiyor	kararlı	kararlı
Kart	Yerleşim	kararlı	gerekmiyor	kararlı	kararlı
Kayan pano	Yerleşim	kararlı	düğmeler ve noktalar	kararlı	kararlı
Kayıt listesi	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Kip pencere	Yerleşim	kararlı	odak tuzağı	kararlı	kararlı
Kod	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Kurum logosu TR	Kimlik	kararlı	gerekmiyor	kararlı	kararlı
Kurum tanıtıcısı TR	Kimlik	kararlı	gerekmiyor	kararlı	kararlı
KVKK açık rıza TR	Türkiye’ye özgü hizmet	kararlı	gerekmiyor	kararlı	kararlı
Liste	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Metin girişi	Form	kararlı	gerekmiyor	kararlı	kararlı
Onay kutusu	Seçim	kararlı	gerekmiyor	kararlı	kararlı
Özet listesi	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Parola girişi	Form	kararlı	göster ve gizle	kararlı	kararlı
Paylaş	Eylem	kararlı	gerekmiyor	kararlı	kararlı
Plaka girişi TR	Türkiye’ye özgü form	kararlı	biçimlendirme	kararlı	kararlı
Puanlama	Seçim	kararlı	gerekmiyor	kararlı	kararlı
Resmî site afişi TR	Kimlik	kararlı	aç ve kapat	kararlı	kararlı
Rozet	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Saat girişi	Form	kararlı	gerekmiyor	kararlı	kararlı
Sayfa içi gezinme	Gezinme	kararlı	gerekmiyor	kararlı	kararlı
Sayfa yolu	Gezinme	kararlı	gerekmiyor	kararlı	kararlı
Sayfadan çık	Eylem	kararlı	hızlı çıkış	kararlı	kararlı
Sayfalama	Gezinme	kararlı	gerekmiyor	kararlı	kararlı
Sayı girişi	Form	kararlı	gerekmiyor	kararlı	kararlı
Seçenek düğmesi	Seçim	kararlı	gerekmiyor	kararlı	kararlı
Seçim etiketi	Seçim	kararlı	kaldırma	kararlı	kararlı
Sekme simgesi	Kimlik	gerekmiyor	gerekmiyor	gerekmiyor	gerekmiyor
Sekmeler	Yerleşim	kararlı	klavye desteği	kararlı	kararlı
Ses	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Sıralanabilir tablo	İçerik	kararlı	sütun sıralama	kararlı	kararlı
Simge	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Simge kartı	Yerleşim	kararlı	gerekmiyor	kararlı	kararlı
Simgeli liste	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Son güncelleme	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Sonuç paneli	Geri bildirim	kararlı	gerekmiyor	kararlı	kararlı
Süreç listesi	İçerik	kararlı	gerekmiyor	kararlı	kararlı
T.C. kimlik numarası girişi TR	Türkiye’ye özgü form	kararlı	doğrulama	kararlı	kararlı
Tablo	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Takip et	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Takvim	Form	kararlı	ay ızgarası ve klavye	kararlı	kararlı
Tanım listesi	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Tarih girişi TR	Türkiye’ye özgü form	kararlı	doğrulama	kararlı	kararlı
Telefon girişi TR	Türkiye’ye özgü form	kararlı	biçimlendirme	kararlı	kararlı
Tipografi	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Uyarı	Geri bildirim	kararlı	gerekmiyor	kararlı	kararlı
Uyarı metni	Geri bildirim	kararlı	gerekmiyor	kararlı	kararlı
Vergi kimlik numarası girişi TR	Türkiye’ye özgü form	kararlı	doğrulama	kararlı	kararlı
Video	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Vurgulu metin	İçerik	kararlı	gerekmiyor	kararlı	kararlı
Web adresi girişi	Form	kararlı	gerekmiyor	kararlı	kararlı
Yan menü	Gezinme	kararlı	gerekmiyor	kararlı	kararlı
Yan panel	Yerleşim	kararlı	aç ve kapat	kararlı	kararlı
Yardım metni	Form	kararlı	gerekmiyor	kararlı	kararlı
Yardımcı sınıflar	Yerleşim	kararlı	gerekmiyor	gerekmiyor	gerekmiyor
Yazdır	Eylem	kararlı	yazdırma	kararlı	kararlı
Yönlendirme	Geri bildirim	kararlı	adımlar	kararlı	kararlı
Yükleniyor	Geri bildirim	kararlı	gerekmiyor	kararlı	kararlı
Yüzen düğme	Eylem	kararlı	gerekmiyor	kararlı	kararlı
Zaman çizelgesi	İçerik	kararlı	gerekmiyor	kararlı	kararlı

Teknolojiler

Düz HTML ve CSS

kararlı

Yapı taşı budur. Diğer bütün entegrasyonlar bunun üstüne kurulur.

Kurulum

npm install @trds/core

Kullanım

<link rel="stylesheet" href="/trds/trds.min.css">
<script type="module" src="/trds/trds.min.js"></script>

JavaScript olmadan da her bileşen okunur ve kullanılır.
CSS tek dosyadır ve tema değişkenlerini içermez.

React

kararlı

Çekirdek sınıfları saran ince bir bileşen katmanı. İş mantığı taşımaz.

Kurulum

npm install @trds/react @trds/core

Kullanım

import '@trds/core/css';
import { Dugme, KimlikNoGirisi } from '@trds/react';

export function Basvuru() {
  return (
    <form>
      <KimlikNoGirisi name="tckn" etiket="T.C. kimlik numaranız" ykn />
      <Dugme tur="birincil">Devam et</Dugme>
    </form>
  );
}

React 18 ve 19 desteklenir. Paket düz JavaScript’tir, JSX derleyicisi gerektirmez.
Her bileşen @trds/tanim içindeki tek tanımdan üretilir. React ve Vue çıktısı testte birebir karşılaştırılır.
Form bileşenleri ref iletir ve bilinmeyen özellikleri kök öğeye geçirir. Yerleşim ve kimlik bileşenleri sabit bir özellik listesi taşır.

Next.js

beta

App Router ile sunucu tarafında işlenir. Bileşenler istemci tarafına yalnız gerektiğinde iner.

Kurulum

npm install @trds/react @trds/core

Kullanım

// app/layout.tsx
import '@trds/core/css';
import '@trds/theme-vatandas';

export default function RootLayout({ children }) {
  return (
    <html lang="tr">
      <body>{children}</body>
    </html>
  );
}

lang="tr" her zaman kök <html> öğesinde durur.
Etkileşimli bileşenler "use client" ile işaretlenir.

Vue

kararlı

Çekirdeği saran ince bir bileşen katmanı. Şablon derleyicisi gerektirmez, çizim işlevi taşır.

Kurulum

npm install @trds/vue @trds/core

Kullanım

import { createApp } from 'vue';
import { Trds } from '@trds/vue';
import '@trds/core/css';

createApp(App).use(Trds);

<!-- App.vue -->
<template>
  <form>
    <TrdsKimlikNoGirisi etiket="T.C. kimlik numaranız" name="tckn" />
    <TrdsDugme>Devam et</TrdsDugme>
  </form>
</template>

Vue 3.3 ve üstü desteklenir. Bileşenler h() ile çizilir, .vue dosyası yoktur.
app.use(Trds) bütün bileşenleri Trds öneki ile kaydeder. Tek tek içe aktarmak da olur.
Davranış bağlandıktan sonra @trds/core baslat() ile gelir. Sunucu tarafında aynı HTML üretilir.

Angular

beta

CSS ve HTML bugün çalışır. Davranış için görünüm kurulduktan sonra baslat() çağrılır. Sarmalayıcı paket yol haritasında.

Kurulum

npm install @trds/core

Kullanım

import { AfterViewInit, Component, ElementRef } from '@angular/core';
import { baslat } from '@trds/core';

@Component({
  selector: 'app-basvuru',
  templateUrl: './basvuru.component.html'
})
export class BasvuruComponent implements AfterViewInit {
  constructor(private kok: ElementRef<HTMLElement>) {}
  ngAfterViewInit() { baslat(this.kok.nativeElement); }
}

angular.json içinde styles listesine node_modules/@trds/core/dist/trds.css eklenir.
Angular 17 ve üstü hedeflenir.
Angular bileşen sarmalayıcıları (@trds/angular) yol haritasındadır.

ASP.NET Core

değerlendiriliyor

Kamu kurumlarında en yaygın sunucu tarafı yığındır. Tag Helper olarak sarılır.

Kurulum

CSS ve JS dosyalarını wwwroot altına kopyalayın.

Kullanım

<link rel="stylesheet" href="~/lib/trds/trds.min.css" />
<script type="module" src="~/lib/trds/trds.min.js"></script>

<trds-kimlik-no asp-for="TcKimlikNo" etiket="T.C. kimlik numaranız" />

Sunucu tarafı doğrulaması için Trds.Validators NuGet paketi planlanmıştır.
İstemci doğrulaması sunucu doğrulamasının yerine geçmez.

Java ve Thymeleaf

değerlendiriliyor

Bakanlık uygulamalarında yaygındır. Parça şablonları olarak sarılır.

Kurulum

CSS ve JS dosyalarını static klasörüne kopyalayın.

Kullanım

<div th:replace="~{trds/kimlik-no :: alan(
  ad='tckn', etiket='T.C. kimlik numaranız')}"></div>

Sunucu tarafı doğrulaması için tr.gov.trds:validators paketi planlanmıştır.