# Segment Evergreen Tasarım Sistemi

## Segment Evergreen Tasarım Sistemi Arayüz Önizlemesi

Bir planı gerekli etiketlerle birleştirin, eşleşen kayıtları inceleyin, eşleşme bulunmadığında toparlanın ve yerel bir anlık görüntüyü gözden geçirin.

## Segment Evergreen Tasarım Sistemi Tasarım Referansı

Yerel hedef kitle kurallarıyla yerel Evergreen 7.1.9 React bileşenleri ve defaultTheme.

### Köşe yarıçapları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| radii.0 | 0px | Temanın dizinlenmiş radius değerini kullanın; iç içe geçmiş her kutunun köşelerini giderek daha yuvarlak yapmak yerine bir rol seçin. |
| radii.1 | 4px | Temanın dizinlenmiş radius değerini kullanın; iç içe geçmiş her kutunun köşelerini giderek daha yuvarlak yapmak yerine bir rol seçin. |
| radii.2 | 8px | Temanın dizinlenmiş radius değerini kullanın; iç içe geçmiş her kutunun köşelerini giderek daha yuvarlak yapmak yerine bir rol seçin. |
### Yazı boyutları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| fontSizes.0 | 10px | Yayımlanan varsayılan temadaki dizinlenmiş font-size değerleri. |
| fontSizes.1 | 12px | Yayımlanan varsayılan temadaki dizinlenmiş font-size değerleri. |
| fontSizes.2 | 14px | Yayımlanan varsayılan temadaki dizinlenmiş font-size değerleri. |
| fontSizes.3 | 16px | Yayımlanan varsayılan temadaki dizinlenmiş font-size değerleri. |
| fontSizes.4 | 18px | Yayımlanan varsayılan temadaki dizinlenmiş font-size değerleri. |
| fontSizes.5 | 20px | Yayımlanan varsayılan temadaki dizinlenmiş font-size değerleri. |
| fontSizes.6 | 24px | Yayımlanan varsayılan temadaki dizinlenmiş font-size değerleri. |
| fontSizes.7 | 32px | Yayımlanan varsayılan temadaki dizinlenmiş font-size değerleri. |
### Satır yükseklikleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| lineHeights.0 | 16px | Her paragrafı başlık ritmine göre biçimlendirmek yerine, amaçlanan metin rolüyle eşleştirin. |
| lineHeights.1 | 18px | Her paragrafı başlık ritmine göre biçimlendirmek yerine, amaçlanan metin rolüyle eşleştirin. |
| lineHeights.2 | 20px | Her paragrafı başlık ritmine göre biçimlendirmek yerine, amaçlanan metin rolüyle eşleştirin. |
| lineHeights.3 | 24px | Her paragrafı başlık ritmine göre biçimlendirmek yerine, amaçlanan metin rolüyle eşleştirin. |
| lineHeights.4 | 28px | Her paragrafı başlık ritmine göre biçimlendirmek yerine, amaçlanan metin rolüyle eşleştirin. |
| lineHeights.5 | 32px | Her paragrafı başlık ritmine göre biçimlendirmek yerine, amaçlanan metin rolüyle eşleştirin. |
| lineHeights.6 | 40px | Her paragrafı başlık ritmine göre biçimlendirmek yerine, amaçlanan metin rolüyle eşleştirin. |
### Yazı tipi kalınlıkları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| fontWeights.light | 300 | Evergreen bu temada semibold değerini 500, bold değerini 600 olarak tanımlar; bunları sessizce tarayıcının varsayılan anahtar sözcük değerleriyle değiştirmeyin. |
| fontWeights.normal | 400 | Evergreen bu temada semibold değerini 500, bold değerini 600 olarak tanımlar; bunları sessizce tarayıcının varsayılan anahtar sözcük değerleriyle değiştirmeyin. |
| fontWeights.semibold | 500 | Evergreen bu temada semibold değerini 500, bold değerini 600 olarak tanımlar; bunları sessizce tarayıcının varsayılan anahtar sözcük değerleriyle değiştirmeyin. |
| fontWeights.bold | 600 | Evergreen bu temada semibold değerini 500, bold değerini 600 olarak tanımlar; bunları sessizce tarayıcının varsayılan anahtar sözcük değerleriyle değiştirmeyin. |
### Varsayılan palet referansları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| colors.gray900 | #101840 | Birincil koyu metin. |
| colors.gray700 | #696f8c | Yardımcı metin. |
| colors.gray400 | #d8dae5 | Tanımlı kenarlık. |
| colors.gray200 | #edeff5 | İnce ayırıcı. |
| colors.gray100 | #F4F5F9 | Sade arka plan. |
| colors.blue500 | #3366FF | Birincil mavi referansı. |
| colors.blue600 | #2952CC | Daha belirgin mavi etkileşim referansı. |
| colors.red500 | #D14343 | Kritik/hata referansı. |
| colors.green500 | #52BD95 | Başarı referansı. |
### Yerleşim işlevleri ve kontrollü girdi API

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| majorScale(3) | 24px | Bölüm aralıkları için sekiz piksellik ana ölçek. |
| minorScale(3) | 12px | Daha küçük ilişkiler için dört piksellik ara ölçek. |
| TagInput.values | controlled array | Kabul edilen etiketlerin denetimi uygulamaya aittir. |
| TagInput.onChange | new array; return false to retain input | Eklemeleri kabul etmeden önce doğrulayın. |
| TagInput.separator | comma and new line by default | Özel bir ayrıştırıcı olmadan birden fazla etikete izin verin. |
## Segment Evergreen Tasarım Sistemi Eksiksiz Kılavuzu

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Segment Evergreen Tasarım Sistemi Hedef Kitle Oluşturucu Yapısı

### Kuralları sonuçlarının yanında tutun

> Örnek, kural panelini eşleşen kurgusal kayıtlarla birlikte sunar. Plan seçimi ve zorunlu etiketler, sonuç sayısıyla aynı anda görünür; böylece bir kuralı değiştirmenin etkisi anlaşılır. Kullanıcının geçerli birleşimin herhangi biriyle eşleşip eşleşmediğini görmek için kaydetmesi ya da iletişim kutusu açması gerekmez.

### Sınırlı ve şeffaf bir örnek veri kümesi kullanın

Adlandırılmış beş örnek kayıt, planlarını ve etiketlerini gösterir. Sayfa, müşteri veri ambarını sorguladığını veya gerçek bir hedef kitle büyüklüğünü tahmin ettiğini iddia etmez. Sıfır sonuç da örneğin yararlı bir parçasıdır ve tüm örnek veri kümesini geri yükleyen bir eylem sunulur.

## Segment Evergreen Tasarım Sistemi Tema Değerleri ve Anlambilimi

### Gerçek varsayılan temayı inceleyin

Evergreen 7.1.9, adlandırılmış renkler ve bileşen stillerinin yanı sıra dizinlenmiş köşe yarıçapları, yazı tipi boyutları ve satır yükseklikleri sağlar. Tablo, dışa aktarılan bu değerleri değiştirmeden korur. Özellikle yazı tipi kalınlığı adlarını incelemekte fayda var: semibold ve bold, yaygın varsayımlardan farklı olarak 500 ve 600 değerlerine karşılık gelir.

### Özel düzenlemeyi uyumlu tutun

ThemeProvider; yerel girdileri, etiketleri, rozetleri, düğmeleri ve iletişim kutusunu sağlar. Özel paneller aynı ölçülü soğuk gri ve mavi ilişkisini kullanır. Örnek, yerel bileşenlerin iç yapısını geniş kapsamlı CSS seçicilerle ezmez; böylece sağlanan etkileşim stilleri korunur.

## Segment Evergreen Tasarım Sistemi Kural Düzenleme Tipografisi

### Görev için net bir hiyerarşi oluşturun

Başlık rolleri; hedef kitle başlığını panel başlıklarından ve tek tek sonuç adlarından ayırır. Açıklama metni, etiket girişini ve kurgusal verilerin kapsamını açıklar. Sayı rozeti, sonuç başlığının yerine geçmek yerine yanında yer alır; böylece kullanıcı sayıyı yorumlamadan önce ilgili bölümü belirleyebilir.

### Meta verileri okunaklı tutun

Plan ve etiket bilgileri eşleşme açıklamasını destekler; yalnızca dekoratif değildir. Düzen, etiketlerin satır atlamasına izin verir ve dar telefon ekranlarında kaydın metniyle rozetlerini alt alta dizer. Her etiketi küçücük metne dönüştürmek, kullanıcının kuralları anlamak için ihtiyaç duyduğu kanıtları gizler.

## Segment Evergreen Tasarım Sistemi Ana ve Ara Ölçekleri

### Tekrarlanabilir aralıklar için işlevleri kullanın

majorScale ve minorScale, sekiz ve dört piksellik adımları ifade eder. Bileşen örneği, panel başlığı için 24px aralıkta majorScale(3) kullanırken özel stil sayfası duyarlı düzenlemeyi yönetir. Bu ayrımı net tutun: ızgara kesme noktası bir uygulama kararıdır, aralık işlevinin sonucu değildir.

### Mobilde alanlar arasındaki ilişkileri koruyun

Kural paneli, uygulamanın özgün kesme noktasında sonuçların üzerine taşınır. Etiketler, ipuçları ve denetimler birlikte kalır; etiket girdisi kullanılabilir genişliğin tamamını kaplar. Yerel etiket satır kaydırma özelliği, uzun değer listelerinin yatay kaydırmalı bir forma dönüşmesini önler.

## Segment Evergreen Tasarım Sistemi Kontrollü Etiketler ve Eşleştirme

### Değerleri kabul etmeden önce normalleştirin

onChange işleyicisi dizelerin başındaki ve sonundaki boşlukları kaldırır, harfleri küçültür, yinelenenleri ayıklar ve dört farklı etiketten fazlasını reddeder. Eklenen değer reddedildiğinde false döndürmek, girdiyi korur. Bu ilke hedef kitle uygulamasına aittir; TagInput, iş kuralı sınırı belirlemek yerine kontrollü etkileşimi sağlar.

### Tüm etiketlerle eşleştirmeyi bilinçli kullanın

Bir kaydın eşleşmesi için seçilen planı ve zorunlu etiketlerin tümünü karşılaması gerekir. Etiketleri temizlemek bu kısıtlamayı kaldırır; Any seçeneğini belirlemek plan kısıtlamasını kaldırır. Geçerli sonuç sayısı, ekranda gösterilen kartlarla aynı filtrelenmiş diziden hesaplanır; böylece sayı ile görünür kartların tutarsız olması önlenir.

## Segment Evergreen Tasarım Sistemi İnceleme İletişim Kutusu ve Yerel Anlık Görüntü

### Kaydetmeden önce geçerli kuralları gözden geçirin

İletişim kutusu açılmadan önce hedef kitle adı boş olmamalıdır. İletişim kutusunda ad, sonuç sayısı, plan ve etiketler yinelenir; ardından yerel olarak kaydetme seçeneği sunulur. Bu ek adım, yalnızca "Emin misiniz?" diyen boş bir onay yerine somut bir anlık görüntü etrafında yerel bir katman kullanımını gösterir.

### Kurallar değiştiğinde önceki başarı durumunu geçersiz kılın

Adın, planın veya etiketlerin değiştirilmesi, kaydedilmiş anlık görüntü göstergesini temizler. Böylece önceki yerel başarı, yeni düzenlenen kuralların onayı sanılamaz. Uygulama, anlık görüntüyü Segment hedef kitlesi olarak tanımlamaz ve müşteri platformuna istek göndermez.

## Segment Evergreen Tasarım Sistemi Klavye Girişi ve İletişim Kutusu Kurtarma

### Etiketleri, sonuçları ve incelemeyi tek akışta sınayın

Etiketler belgelenen giriş tuşlarıyla eklenebilir ve input, id değeri üzerinden görünür bir etiket alır. Etiket sınırının aşılması, yerel bir danger uyarısı görüntüler. İnceleme, odağı yönetmeyen elle oluşturulmuş bir katman yerine yerel Dialog odak davranışını kullanır.

1. Başlangıçtaki etkin etikete newsletter ekleyin ve sonuç sayısını karşılaştırın.

2. Eşleşmeyen bir etiket ekleyin, ardından beş kaydı geri getirmek için kuralları temizleyin.

3. Yerel olarak inceleyip kaydedin, ardından bir kuralı değiştirerek önceki başarı göstergesinin kaybolduğunu doğrulayın.

### Boş durumdan kurtarma seçeneğini geçerli görevin içinde tutun

Kuralları temizlemek hem plan hem de etiket kısıtlamalarını kaldırır ve artık geçerli olmayan kayıtlı durumu kapatır. Böylece sonuç bölgesinde beş kaydın tümü yeniden görünür. Kullanıcı hemen düzenlemeye devam edebilir; gizli bir gezinme veya sayfanın yeniden yüklenmesi gerekmez.

## Segment Evergreen Tasarım Sistemi React Entegrasyonu

### Eksiksiz ve kontrollü bir örnek kullanın

Yerel giriş, ThemeProvider, defaultTheme ve görüntülediği bileşenleri içe aktarır. Durum; kuralları, hataları, iletişim kutusunun görünürlüğünü ve yerel kaydedilmiş anlık görüntüyü tutar. Aşağıdaki eksiksiz JSX ve CSS, kurgusal veri kümesini içerir; böylece sonuç hesaplaması harici bir API olmadan tekrarlanabilir.

- ThemeProvider, sabitlenmiş defaultTheme değerini kullanır.

- TagInput değerleri uygulama tarafından denetlenir.

- Dialog, sonuç listesinde kullanılan aynı kuralları gözden geçirir.

### Veri erişimini ayrı bir uygulama katmanı olarak ekleyin

Gerçek bir hedef kitle aracı için kimliği doğrulanmış veri erişimi, tanımlı bir eşleştirme sorgusu, yükleme durumu ve sunucu destekli kaydetme davranışı gerekir. Kuralları önizlemekle hedef kitleyi kalıcı olarak kaydetmek arasındaki farkı koruyun. Gerçek bir veri kümesine bağlanırken beş kayıtlık örnek veri kümesinin sonuç sayısını kullanmayın.

## Segment Evergreen Tasarım Sistemi Bileşen Örnekleri

### main.jsx — eksiksiz çalışan örnek

Yerel bir hedef kitle oluşturup inceleyin. Aşağıdaki kaynak, tüm durum ve doğrulama mantığını içeren eksiksiz React girişidir.

```
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import {
  ThemeProvider,
  defaultTheme,
  Heading,
  Text,
  Paragraph,
  Button,
  TagInput,
  TextInputField,
  SelectField,
  Alert,
  Dialog,
  Badge,
  majorScale,
} from "evergreen-ui";
import "./evergreen.css";
const people = [
  { name: "Avery Stone", plan: "Pro", tags: ["active", "newsletter"] },
  { name: "Taylor Reed", plan: "Free", tags: ["newsletter"] },
  { name: "Jordan Park", plan: "Pro", tags: ["active"] },
  { name: "Morgan Lee", plan: "Team", tags: ["active", "newsletter"] },
  { name: "Casey Chen", plan: "Free", tags: ["trial"] },
];
function App() {
  const [tags, setTags] = useState(["active"]),
    [plan, setPlan] = useState("Any"),
    [name, setName] = useState("Active customers"),
    [error, setError] = useState(""),
    [open, setOpen] = useState(false),
    [saved, setSaved] = useState(null);
  const matches = people.filter(
    (p) =>
      (plan === "Any" || p.plan === plan) &&
      tags.every((t) => p.tags.includes(t)),
  );
  function changeTags(values) {
    const unique = [
      ...new Set(values.map((v) => v.trim().toLowerCase()).filter(Boolean)),
    ];
    if (unique.length > 4) {
      setError("Use at most four tags.");
      return false;
    }
    setTags(unique);
    setError("");
    setSaved(null);
  }
  return (
    <ThemeProvider value={defaultTheme}>
      <main className="audience">
        <header>
          <Text size={300}>WORKSPACE / AUDIENCES</Text>
          <Heading size={700} marginTop={8}>
            Build a focused audience
          </Heading>
          <Paragraph marginTop={8}>
            Combine a plan and tags against five fictional records. No customer
            data is loaded.
          </Paragraph>
        </header>
        <div className="audience-grid">
          <section className="rule-panel">
            <Heading size={500} marginBottom={majorScale(3)}>
              Audience rules
            </Heading>
            <TextInputField
              label="Audience name"
              value={name}
              onChange={(e) => {
                setName(e.target.value);
                setSaved(null);
              }}
            />
            <SelectField
              label="Plan"
              value={plan}
              onChange={(e) => {
                setPlan(e.target.value);
                setSaved(null);
              }}
            >
              <option>Any</option>
              <option>Free</option>
              <option>Pro</option>
              <option>Team</option>
            </SelectField>
            <label htmlFor="audience-tags">Required tags</label>
            <Paragraph size={300} marginBottom={8}>
              Press Enter or comma to add a tag. Every tag must match.
            </Paragraph>
            <TagInput
              values={tags}
              onChange={changeTags}
              width="100%"
              inputProps={{ id: "audience-tags", placeholder: "Add tag…" }}
            />
            <Paragraph size={300} marginTop={8}>
              Available sample tags: active, newsletter, trial.
            </Paragraph>
            {error && <Alert intent="danger" title={error} marginTop={16} />}
            <Button
              appearance="primary"
              marginTop={24}
              onClick={() => {
                if (!name.trim()) {
                  setError("Name the audience before reviewing.");
                  return;
                }
                setError("");
                setOpen(true);
              }}
            >
              Review audience
            </Button>
          </section>
          <section className="results-panel">
            <div className="results-title">
              <Heading size={500}>Matching sample records</Heading>
              <Badge color="blue">
                {matches.length} of {people.length}
              </Badge>
            </div>
            {matches.length ? (
              <div className="record-list">
                {matches.map((p) => (
                  <article key={p.name}>
                    <div>
                      <Heading size={400}>{p.name}</Heading>
                      <Text size={300}>{p.plan} plan</Text>
                    </div>
                    <div className="tag-list">
                      {p.tags.map((t) => (
                        <Badge key={t} color="neutral">
                          {t}
                        </Badge>
                      ))}
                    </div>
                  </article>
                ))}
              </div>
            ) : (
              <div className="empty">
                <Heading size={500}>No matching sample records</Heading>
                <Paragraph marginTop={8}>
                  Remove a tag or change the plan to broaden the selection.
                </Paragraph>
                <Button
                  marginTop={16}
                  onClick={() => {
                    setTags([]);
                    setPlan("Any");
                    setSaved(null);
                  }}
                >
                  Clear rules
                </Button>
              </div>
            )}
            {saved && (
              <Alert
                intent="success"
                title="Local audience saved"
                marginTop={20}
              >
                {saved.name} · {saved.count} sample records. Nothing was sent to
                Segment.
              </Alert>
            )}
          </section>
        </div>
        <Dialog
          isShown={open}
          title="Review local audience"
          onCloseComplete={() => setOpen(false)}
          confirmLabel="Save locally"
          onConfirm={() => {
            setSaved({ name: name.trim(), count: matches.length });
            setOpen(false);
          }}
          width={560}
        >
          <Paragraph>
            <strong>{name}</strong> matches {matches.length} of {people.length}{" "}
            fictional records.
          </Paragraph>
          <Paragraph marginTop={12}>
            Plan: {plan}. Required tags: {tags.join(", ") || "none"}.
          </Paragraph>
          <Paragraph marginTop={12}>
            This saves only a local snapshot; it does not create a Segment
            audience.
          </Paragraph>
        </Dialog>
        <footer>
          Native Evergreen 7.1.9 React components. Original audience logic; no
          analytics or customer service connection.
        </footer>
      </main>
    </ThemeProvider>
  );
}
createRoot(document.getElementById("root")).render(<App />);
```

Kod referansı

- Bir Vite React projesi oluşturun, <div id="root"></div> öğesini koruyun ve bunu src/main.jsx dosyası olarak yükleyin.

### evergreen.css — özgün duyarlı düzen

Yerel bileşenlerin üzerine katmanlanan uygulama düzeni.

```
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #f4f5f9;
  color: #101840;
  font:
    14px/1.5 system-ui,
    sans-serif;
}
.audience {
  padding: 32px;
}
.audience header {
  max-width: 800px;
  margin-bottom: 28px;
}
.audience-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.5fr);
  gap: 24px;
}
.rule-panel,
.results-panel {
  padding: 24px;
  background: white;
  border: 1px solid #d8dae5;
  border-radius: 8px;
  min-width: 0;
}
.rule-panel > label {
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}
.results-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.record-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid #edeff5;
}
.record-list article:first-child {
  padding-top: 0;
}
.record-list article:last-child {
  border: 0;
}
.tag-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.empty {
  padding: 36px 12px;
  text-align: center;
  background: #f4f5f9;
  border-radius: 4px;
}
.audience footer {
  margin-top: 24px;
  font-size: 12px;
  color: #696f8c;
}
.audience input {
  max-width: 100%;
}
[role="dialog"] {
  max-width: calc(100vw - 32px);
}
@media (max-width: 850px) {
  .audience-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 550px) {
  .audience {
    padding: 16px;
  }
  .rule-panel,
  .results-panel {
    padding: 20px;
  }
  .record-list article {
    align-items: flex-start;
    flex-direction: column;
  }
  .results-title {
    align-items: flex-start;
  }
}
```

Kod referansı

- main.jsx dosyasının yanına kaydedin. Bu özel düzen kuralları, kitaplığın belirteç başvurusundan ayrı tutulmuştur.

## Segment Evergreen Tasarım Sistemi Yapay Zekâ Aracısı Kurulumu

### Uygulamaya Başlangıç Noktası

Sabitlenmiş yerel örnek pakete alındı ve tarayıcıda yerel olarak kontrol edildi. Örnek yalnızca yerel uygulama durumunu kullanır.

```
npm create vite@latest evergreen-audience -- --template react
cd evergreen-audience
npm install
npm install react@18.3.1 react-dom@18.3.1 evergreen-ui@7.1.9
# Replace src/main.jsx and add src/evergreen.css.
npm run dev
```

### Projeniz İçin Bir İstem

```
Gerçek temayı ve kontrollü TagInput bileşenini kullanarak bir Evergreen hedef kitle düzenleyicisi oluşturun. Etiketleri normalleştirip yinelenenleri ayıklayın, tüm etiketlerle eşleştirmeyi açıkça belirtin, sonuçların ve sayıların tutarlı kalmasını sağlayın, yerel Dialog içinde inceleme sunun ve kurallar değiştiğinde eski başarı durumunu temizleyin. Segment hizmeti bağlantısı olduğunu iddia etmeyin.
```

## Segment Evergreen Tasarım Sistemi Kaynakları ve Kapsamı

OpenDesign Evergreen 7.1.9 için uygulama kılavuzu. Beş kurgusal kayıt, yerel filtrelemeyi ve anlık görüntü incelemesini gösterir. Segment müşteri verileri veya hedef kitle API bağlantısı yoktur.

- Evergreen Etiket Girişi Kontrollü değerler, ayırıcılar ve reddetme davranışı.

- Evergreen İletişim Kutusu Yerel odak, onay ve kapatma davranışı.

- Sabitlenmiş Tema Kaynağı Yayımlanan varsayılan tema bileşimi.

## Segment Evergreen Tasarım Sistemi İlgili Kaynaklar

### Semi Design

Semi’nin önerdiği temel Steps bileşenleri, denetimli Input ve Switch bileşenleri, gerçek tema belirteçleri ve açık bir React 18 veya React 19 paket seçeneğiyle ardışık bir çalışma alanı kurulumu oluşturun.

### Semrush Intergalactic

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.

### ServiceNow Horizon

Taslağı koruma, doğrulama, durum filtreleri ve kurtarma içeren eksiksiz bir yerel talep inceleme akışı üzerinden Horizon Workspace’in kesin aralık, yarıçap ve tipografi referanslarını keşfedin.


- [Uygulama başvurusu](https://evergreen.segment.com/components/tag-input)
- [Kaynak](https://cdn.jsdelivr.net/npm/evergreen-ui@7.1.9/esm/themes/default/index.js)
- [Kaynak](https://evergreen.segment.com/components/tag-input)
- [Kod referansı](https://evergreen.segment.com/components/tag-input)
- [Evergreen Etiket Girişi Kontrollü değerler, ayırıcılar ve reddetme davranışı.](https://evergreen.segment.com/components/tag-input)
- [Evergreen İletişim Kutusu Yerel odak, onay ve kapatma davranışı.](https://evergreen.segment.com/components/dialog)
- [Sabitlenmiş Tema Kaynağı Yayımlanan varsayılan tema bileşimi.](https://cdn.jsdelivr.net/npm/evergreen-ui@7.1.9/esm/themes/default/index.js)