Arayüz kurmak
Kompakt alan ve ada kartı; düzen, veri gösterimi ve kontroller.
Eklentin HTML değil, düğümlerden oluşan bir görünüm döndürür. AdanotchKit.ui bu düğümleri kuran yardımcılardır; Adanotch onları yerel SwiftUI ile çizer, renkleri ve yazı tiplerini adaya uydurur.
const { ui } = AdanotchKit;
return {
compact: { leading: ui.icon("cloud.sun.fill"), trailing: ui.text("21°") },
expanded: ui.stack([
ui.text("İstanbul", { style: "title" }),
ui.text("Parçalı bulutlu", { tone: "secondary" }),
]),
};İki alan
| Alan | Nerede | Ne sığar |
|---|---|---|
compact.leading / compact.trailing | Kapalı adada, çentiğin solu ve sağı | text, icon, badge, timer, ring, progress (küçük halka), gauge (42% olarak) |
expanded | Açılan ada kartı | Tek bir düğüm; genellikle bir stack |
Kompakt alanda metni kısa tut: birkaç karakter. Ayrıntıyı karta bırak.
Renkler ve yazı
Ham renk yoktur. Her düğüm anlamsal bir tone alır, Adanotch tonun gerçek rengini seçer:
default · secondary · accent · success · warning · danger
Temel metin ve simgeler
ÖrnekYardımcı metin ve etiketler
ÖrnekVurgu, bağlantı, sayaç
ÖrnekTamamlanan, onaylanan
ÖrnekUyarı, bekleyen durum
ÖrnekKritik sınır, hata
ÖrnekMetin stilleri: title · body · caption · mono · display.
ui.text(`${cpu}%`, { style: "display", tone: cpu > 80 ? "danger" : "default" });Simgeler SF Symbols adlarıdır: "cpu", "bolt.fill", "checkmark.circle".
Düzen
ui.stack(
[
ui.icon("music.note"),
ui.text(track.title),
ui.spacer(), // komşularını iki uca iter
ui.badge("Canlı", { tone: "danger" }),
],
{ axis: "h", spacing: 8, align: "center" },
);stack(children, { axis, spacing, align }): varsayılan dikey.null,undefinedvefalseçocuklar atlanır, böylecekoşul && ui.text(...)yazabilirsin.grid(children, { columns, spacing }): eşit sütunlar.scroll(child, { maxHeight }): uzun içerik için kaydırma.tabs([{ title, icon, content }]): sekmeler. Sekme değiştirmek eklentini çağırmaz.divider(),spacer().
Veri göstermek
ui.stack([
ui.stack(
[
ui.ring(cpu, { label: "CPU", tone: "accent" }),
ui.ring(ram, { label: "RAM", tone: "success" }),
ui.chart(history, { style: "area", min: 0, max: 100 }),
],
{ axis: "h", spacing: 12 },
),
ui.gauge("Disk", 64),
ui.progress(uploadPercent, { tone: "accent" }),
]);ring,gauge,progress: değer 0–100.chart(values, { style: "line" | "area" | "bar", min, max }): en fazla 500 değer;min/maxverilmezse verinin aralığı.timer(date, { style: "timer" | "relative" }): kendi kendine sayar, yeniden çizmen gerekmez. Gelecekteki tarihe geri, geçmişten ileri sayar.markdown(text): küçük bir Markdown alt kümesi; kalın, eğik, satır içi kod vehttps://bağlantılar.image(src, { shape: "rounded" | "circle", size }): yalnız HTTPS ve yalnıznetwork:alan adlarından; boyut 16–120, varsayılan 40.
// Toplantıya kalan süre, saniye saniye; update çalışmadan.
ui.timer(event.start, { style: "timer", textStyle: "display" });Kontroller
Her kontrolün bir action adı vardır. Kullanıcı kontrolü kullandığında onAction(action, ctx, value) çalışır, ardından update.
expanded: ui.stack([
ui.button("Yenile", "refresh", { icon: "arrow.clockwise", primary: true }),
ui.toggle("Bildirimler", "notify", ctx.settings.notify),
ui.slider("volume", volume, { min: 0, max: 100, step: 5, label: "Ses" }),
ui.textField("search", { placeholder: "Ara…" }),
ui.picker("range", range, [
{ value: "day", label: "Gün" },
{ value: "week", label: "Hafta" },
]),
]),
onAction(action, ctx, value) {
switch (action) {
case "volume": ctx.storage.set("volume", value); break; // number
case "search": ctx.storage.set("query", value); break; // string, Return'e basınca
case "notify": ctx.storage.set("notify", value); break; // boolean
}
}| Kontrol | value |
|---|---|
button(label, action, { value }) | Verdiğin value (yoksa null) |
toggle(label, action, isOn) | Yeni durum, boolean |
slider(action, value, opts) | Bırakıldığı değer, number |
textField(action, opts) | Return'e basıldığında metin |
textField(action, { changeAction }) | changeAction ile, yazarken metin |
picker(action, value, options) | Seçilen seçeneğin value'su |
list([{ action, value }]) | Satırın value'su |
Yazarken arama
changeAction verirsen metin alanı kullanıcı yazarken de haber verir: kullanıcı kısa bir an (250 ms) durduğunda onAction(changeAction, ctx, text) çalışır, ardından update. Return'e basılınca her zamanki gibi action gelir.
let query = "";
activity({
update() {
const shown = items.filter((item) => item.title.toLowerCase().includes(query.toLowerCase()));
return {
expanded: ui.stack([
ui.textField("add", { placeholder: "Ara ya da ekle…", value: query, changeAction: "filter" }),
ui.list(shown),
]),
};
},
onAction(action, ctx, value) {
if (action === "filter") query = String(value); // yazarken
if (action === "add") addItem(String(value)); // Return
},
});Her değişiklik eklentine bir gidiş dönüştür; update'i hızlı tut, yazarken ağ isteği atacaksan sonucu önbellekle.
Listeler
ui.list(
prs.map((pr) => ({
title: pr.title,
subtitle: `#${pr.number} · ${pr.user}`,
icon: pr.draft ? "pencil.circle" : "arrow.triangle.pull",
trailing: pr.age,
tone: pr.failing ? "danger" : "default",
action: "open",
value: pr.url,
})),
);
async onAction(action, ctx, value) {
if (action === "open") await AdanotchKit.open(String(value));
}action verilen satır tıklanabilir olur. open(url) yalnız kullanıcı bir kontrolünü kullandıktan sonraki 10 saniye içinde çalışır; arka planda sayfa açamazsın.
Ek etkinlikler ve bildirimler
Ana görünümün yanında adaya geçici şeyler koyabilirsin:
// Kısa bir bildirim ("notifications" izni)
AdanotchKit.notify.island({ text: "Yedek bitti", icon: "checkmark.circle", tone: "success", duration: 4 });
// Kendi kimliğiyle ek bir etkinlik; aynı id ile tekrar çağırmak günceller
AdanotchKit.island.show({
id: "timer-1",
compact: { leading: ui.icon("timer"), trailing: ui.timer(endsAt) },
duration: 60, // verilmezse hide(id) çağrılana kadar kalır
});
AdanotchKit.island.hide("timer-1");Aynı anda en fazla 8 etkinlik gösterebilirsin.
Tüm düğümler ve seçenekleri: Arayüz başvurusu.