Güncel anlamsal ve grafik belirteçleri, yerel filtreleme denetimleri, sabit ölçekli karşılaştırma, seçili ayrıntı ve yeniden üretilebilir eksiksiz bir fikstür içeren bir Intergalactic kılavuzu.
Semrush Intergalactic Tasarım Sistemi Analitik Çalışma Alanı Düzeni
Karşılaştırmayı net bir soruya dayandırın
Örnek, altı kurgusal anahtar kelimeyi seçilen tek bir metriğe göre karşılaştırır. Filtre, yalnızca izlenenleri gösterme seçeneği ve metrik düğmeleri sonucun üstünde yer alır. Ayrı bir inceleme paneli, seçili terimin her iki metriğini de göstererek kullanıcının sıralama görünümünü temel değerlerle karşılaştırmasını sağlar.
Kurgusal verileri ölçüm verilerinden ayırın
Her sayı sabit bir örnek veri kümesinin parçasıdır ve temsilî olduğu belirtilir. Sayfa, arama hacmini veya zorluğu güncel bir Semrush ölçümü olarak sunmaz. Çubukların arkasında ağ sorgusu, analiz hesabı veya indirilmiş müşteri veri kümesi yoktur.
Semrush Intergalactic Tasarım Sistemi Tema ve Tasarım Değişkeni Oluşturma
Güncel tema paketini bilinçli kullanın
Çalışma zamanı, @semcore/ui 17.6.0 ve @semcore/theme 2.3.1 sürümlerini sabitler. Yerel bileşenler güncel tema paketini gerektirir ve giriş noktası light.css dosyasını içe aktarır. Tablo, ilgisiz eski onaltılık varsayılanlarla değiştirmek yerine bu stil sayfasındaki OKLCH değerlerini korur.
Bileşen rollerini grafik rollerinden ayrı tutun
Yerel kontroller görünümünü Intergalactic stillerinden alırken, özgün çubuk karşılaştırması grafik paletindeki ilk seri rolünü kullanır. Seçim, dikkat dağıtmayan satır arka planı ve basılı durumu ile belirtilir. Seri rengi; her eylem veya hata rengi için gelişigüzel yeniden kullanılmamalıdır.
Semrush Intergalactic Tasarım Sistemi Yoğun Sonuçlarda Tipografi
Etiketleri, birimleri ve değerleri birlikte gösterin
Her çubuk satırında terim ve yazıyla belirtilmiş sayısal değer bulunur. Küçük eksen notu, ölçeğin örnek aramalar mı yoksa 100 üzerinden puan mı olduğunu belirtir. İnceleme paneli her iki birimi de yineler; böylece görsel olarak benzer çubuk uzunlukları, metriklerin birbirinin yerine kullanılabileceği izlenimini yaratmaz.
Bağlamı gizlemeden kısa metin kullanın
Yerel giriş bileşeni, rahatça kullanılabilen bir filtre alanı sağlamak için büyük boyutu kullanır. Sonuç etiketleri kısa tutulurken çalışma alanı başlığı ve bölüm başlıkları daha büyüktür. Dar ekranda anahtar kelime, okunamaz bir parçaya kırpılmak yerine çubuk ve değerin üstüne taşınır.
Semrush Intergalactic Tasarım Sistemi Grafik Ölçeği ve Sıralama
Filtreleme sırasında ölçeği sabit tutun
Hacim grafiği her zaman en yüksek değer olarak 8,100'ü, zorluk grafiği ise 100'ü kullanır. Filtreleme, kalan en uzun çubuğu tam genişliğe uzatmaz. Bu tercih, kullanıcı kümeyi daralttığında karşılaştırmanın anlamını korur.
Etkin metriğe göre sıralayın
Semrush Intergalactic Tasarım Sistemi Yerel Giriş ve Onay Kutusu
Bileşik giriş bileşeninin yapısını kullanın
Input dış bileşeni, Input.Value ise gerçekten düzenlenebilir kontrolü sağlar. onChange geri çağırması önce dize değerini alır; bu, standart bir DOM değişiklik olayı olarak ele alınmasından farklıdır. Görünür etiket, Value id değerine bağlanır.
Boole ve metin filtrelerini birbirinden bağımsız tutun
Yerel Checkbox bileşeninin onChange geri çağırması, işaretli olma durumunu boole değeri olarak alır. Satırlar oluşturulurken metin filtresiyle yalnızca izlenenleri gösterme durumu birleştirilir; dolayısıyla ikisi de boş sonuç verebilir. Filtreleri sıfırlamak, seçili inceleme bağlamını koruyarak her iki kontrolü de eski hâline getirir.
Semrush Intergalactic Tasarım Sistemi Seçili Ayrıntı ve Boş Durum
Seçimi kimliğe bağlı tutun
Seçili terim, dizi sırasından bağımsız olarak saklanır. Bir çubuğa tıklamak bu terimi ve basılı durumunu günceller; inceleme paneli ise kaydın tüm bilgilerini bulur. Başka bir metriğe göre sıralama, inceleme panelinin fark ettirmeden farklı bir satır dizinine yönelmesine neden olamaz.
Filtre dışında kalan seçimi açıklayın
Seçili terim artık görünmüyorsa inceleme paneli, yazılı bir açıklamayla kullanılabilir durumda kalır. Bu, filtreleme öncesi ve sonrası bir öğeyi karşılaştırırken yararlıdır. Boş sonuç alanı, boş bir grafik paneli göstermek yerine açık bir sıfırlama eylemi sunar.
Semrush Intergalactic Tasarım Sistemi Erişilebilir Veri Karşılaştırması
Grafiği renk kullanmadan anlaşılır kılın
Çubuklar, gerçek düğmelerin içindeki dekoratif span öğeleridir. Terim ve değer erişilebilir metni oluşturur; aria-pressed ise seçimi belirtir. Veriler, çubuk uzunluğunu veya seri rengini görmeden de anlaşılabilir. Klavye odağı, seçili satır biçiminden belirgin biçimde ayrıdır.
Difficulty seçeneğini belirleyin; yeniden sıralanan çubukları ve puan birimini inceleyin.
Eşleşmeyen bir terimi filtreleyin ve Filtreleri sıfırla'yı kullanın.
Bir terim seçin, filtreyle gizleyin ve seçimin korunduğunu açıklayan metni okuyun.
Filtre kurtarma yolunu sınayın
Yerel giriş ve onay kutusu gerçek kontrollerini sunar. Metrik değiştirme düğmeleri basılı durumunu belirtir; özgün sıfırlama eylemi ise her iki filtreyi de temizler. Düzen, sonuç başlığını ve birim notunu görünür tutarak boş ve dolu durumlarda aynı bağlamı sağlar.
Semrush Intergalactic Tasarım Sistemi Bileşen İçe Aktarımları ve Tema Kurulumu
Bileşen giriş noktalarını içe aktarın
@semcore/ui kökü, tüm bileşenleri dışa aktarmak yerine bilinçli olarak hata verir. Bu kaynak; button, input ve checkbox bileşenlerini kendilerine ayrılmış giriş noktalarından, ayrıca @semcore/theme/light.css dosyasını içe aktarır. Eksiksiz giriş, örnek veri kümesini ve tüm türetme mantığını içerir.
Ayrılmış @semcore/ui/button, input ve checkbox içe aktarımları.
Sabitlenmiş @semcore/theme/light.css.
Eksiksiz JSX içindeki özgün, sabit ölçekli çubuk ve örnek veri mantığı.
Özel çubukları yerel D3 grafiği olarak adlandırmayın
Semrush Intergalactic Tasarım Sistemi Bileşen Örnekleri
main.jsx — eksiksiz çalışan örnek
Kurgusal bir anahtar kelime kümesini karşılaştırın. Aşağıdaki kaynak, tüm durum ve doğrulama mantığı dâhil eksiksiz React girişidir.
jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Button from "@semcore/ui/button";
import Input from "@semcore/ui/input";
import Checkbox from "@semcore/ui/checkbox";
import "@semcore/theme/light.css";
import "./intergalactic.css";
const data = [
{ term: "design tokens", volume: 8100, difficulty: 42, tracked: true },
{ term: "component library", volume: 6600, difficulty: 58, tracked: false },
{ term: "accessible forms", volume: 2900, difficulty: 31, tracked: true },
{
term: "responsive typography",
volume: 1900,
difficulty: 24,
tracked: false,
},
{ term: "semantic colors", volume: 1300, difficulty: 18, tracked: false },
{ term: "design system audit", volume: 720, difficulty: 36, tracked: true },
];
function App() {
const [q, setQ] = useState(""),
[tracked, setTracked] = useState(false),
[metric, setMetric] = useState("volume"),
[selected, setSelected] = useState("design tokens");
const rows = data
.filter((d) => d.term.includes(q.toLowerCase()) && (!tracked || d.tracked))
.sort((a, b) => b[metric] - a[metric]);
const max = metric === "volume" ? 8100 : 100;
const item = data.find((d) => d.term === selected);
return (
<main className="research">
<header>
<p>RESEARCH WORKSPACE / FICTIONAL DATA</p>
<h1>Compare a keyword set</h1>
<span>
Six authored sample records · figures are illustrative, not Semrush
measurements
</span>
</header>
<div className="research-toolbar">
<div className="research-search">
<label htmlFor="term-search">Filter keywords</label>
<Input size="l">
<Input.Value
id="term-search"
placeholder="Find a sample term"
value={q}
onChange={setQ}
/>
</Input>
</div>
<Checkbox
label="Tracked only"
checked={tracked}
onChange={setTracked}
/>
<div
className="metric-options"
role="group"
aria-label="Comparison metric"
>
<Button
use={metric === "volume" ? "primary" : "secondary"}
aria-pressed={metric === "volume"}
onClick={() => setMetric("volume")}
>
Volume
</Button>
<Button
use={metric === "difficulty" ? "primary" : "secondary"}
aria-pressed={metric === "difficulty"}
onClick={() => setMetric("difficulty")}
>
Difficulty
</Button>
</div>
</div>
<div className="research-grid">
<section className="chart-panel">
<div className="chart-heading">
<h2>
{metric === "volume"
? "Illustrative monthly volume"
: "Illustrative difficulty score"}
</h2>
<span>{rows.length} terms</span>
</div>
<p className="axis-note">
{metric === "volume"
? "Fixed scale: 0–8,100 sample searches"
: "Fixed scale: 0–100 sample score"}
</p>
{rows.length ? (
<div className="bars">
{rows.map((r) => (
<button
className={
"bar-row " + (r.term === selected ? "selected" : "")
}
key={r.term}
onClick={() => setSelected(r.term)}
aria-pressed={r.term === selected}
>
<span className="bar-name">{r.term}</span>
<span className="bar-track" aria-hidden="true">
<i style={{ width: (r[metric] / max) * 100 + "%" }} />
</span>
<strong>{r[metric].toLocaleString("en-US")}</strong>
</button>
))}
</div>
) : (
<div className="no-results">
<h3>No matching terms</h3>
<p>
Clear the text and tracked filter to restore the full
comparison.
</p>
<Button
onClick={() => {
setQ("");
setTracked(false);
}}
>
Reset filters
</Button>
</div>
)}
<p className="chart-note">
Values are written beside every bar. Click a term to inspect both
metrics.
</p>
</section>
<aside>
<h2>{item.term}</h2>
<dl>
<dt>Sample volume</dt>
<dd>{item.volume.toLocaleString("en-US")}</dd>
<dt>Sample difficulty</dt>
<dd>{item.difficulty} / 100</dd>
<dt>Tracking</dt>
<dd>{item.tracked ? "Tracked" : "Not tracked"}</dd>
</dl>
<div className="inspector-note">
<h3>Comparison context</h3>
<p>
The bar scale stays fixed when filters change. Difficulty and
volume have separate units and are not added together.
</p>
</div>
{!rows.some((r) => r.term === selected) && (
<p className="retained">
Selected term is outside the current filter; details are retained.
</p>
)}
</aside>
</div>
<footer>
Native Intergalactic Input, Checkbox and Button from @semcore/ui 17.6.0.
Original accessible HTML bar comparison; no analytics service request.
</footer>
</main>
);
}
createRoot(document.getElementById("root")).render(<App />);
Yerel Intergalactic kontrolleri, özel içe aktarımları ve güncel tema tasarım değişkenlerini kullanan kompakt bir analitik karşılaştırma oluşturun. Birimleri, sabit ölçekleri, sıralamayı ve seçili kimliği tutarlı kılın. Metinsel değerler ve boş durumdan kurtarma seçeneği sunun. Ölçülmüş Semrush verisi olduğu izlenimi vermek yerine, örnek metrikleri ve özgün grafik kodunu doğru biçimde tanımlayın.
05
Semrush Intergalactic Tasarım Sistemi Kaynakları ve Kapsamı
OpenDesign uygulama kılavuzu. Altı anahtar kelime kaydı ve tüm metrikler kurgusaldır. Yerel Intergalactic kontroller, özgün bir HTML grafiği çevreler; bu bir Semrush raporu veya yerel D3 grafik uygulaması değildir.
