Sade HTML ve CSS

Merid'in stilleri yalnızca sınıf adlarına, data attribute'larına ve ARIA state'ine bağlıdır; React'e asla. Sunucuda render'lanan şablonlar (Rails, Django, Laravel, Astro, sade HTML) JavaScript davranışı gerektirmeyen her şey için stil dosyasını doğrudan kullanabilir.

html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@merid/react/dist/styles.css" />
<html>

Aşağıdaki önizleme sade markup olarak render'lanıyor; hiçbir Merid component kodu çalışmıyor.

<div class="mrd-field">
<label class="mrd-label" for="email">E-posta</label>
<input id="email" class="mrd-input" data-size="md" type="email" />
<p class="mrd-field__description">Yalnızca makbuzlar için kullanıyoruz.</p>
</div>

<button class="mrd-button" data-variant="primary" data-size="md">
<span class="mrd-button__content">Hesap oluştur</span>
</button>

JavaScript olmadan ne çalışır

Yalnızca markup ile çalışır	Kendi script'ini ister	React ister
Button, IconButton, Link, Badge, Card, Alert, Separator, Spinner, Skeleton, Progress, Kbd, Code, Avatar (görsel ya da baş harfler), Table, EmptyState, Heading, Text, Stack, Grid, Container, Section, Label, Field, Input, Textarea, NativeSelect, Checkbox, Radio, Breadcrumb, SidebarNav	Switch (`data-state` ve `aria-checked`'i değiştir), Tabs, SegmentedControl, Accordion (ya da `<details>` kullan), Pagination (link olarak)	Dialog, AlertDialog, Drawer, Popover, Tooltip, DropdownMenu, Select, Toast: focus kapanı, konumlandırma ve kapatma React kodunda

React kullanmayan bir sayfada overlay'ler için native <dialog> elemanını kullan ve Merid token'larıyla kendin stil ver, ya da React component'ini bir ada (island) olarak mount et.

Markup referansı

Button

html

<button type="button" class="mrd-button" data-variant="secondary" data-size="md">
  <span class="mrd-button__content">Vazgeç</span>
</button>
<!-- varyantlar: primary | secondary | ghost | danger | link; boyutlar: sm | md | lg -->

Hatalı Field

html

<div class="mrd-field" data-invalid>
  <label class="mrd-label" for="user">Kullanıcı adı</label>
  <input id="user" class="mrd-input" data-size="md" data-invalid aria-invalid="true" aria-describedby="user-error" />
  <p id="user-error" class="mrd-field__error">Bu kullanıcı adı alınmış.</p>
</div>

Checkbox

html

<span class="mrd-checkbox">
  <span class="mrd-checkbox__control">
    <input id="terms" type="checkbox" class="mrd-checkbox__input" />
    <svg class="mrd-checkbox__icon" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3.5 8.5l3 3 6-7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
  </span>
  <span class="mrd-checkbox__text">
    <label for="terms" class="mrd-checkbox__label">Koşulları kabul ediyorum</label>
  </span>
</span>

Badge ve alert

html

<span class="mrd-badge" data-tone="success"><span class="mrd-badge__dot" aria-hidden="true"></span>Canlı</span>

<div class="mrd-alert" data-tone="warning" role="status">
  <div class="mrd-alert__content">
    <div class="mrd-alert__title">Ödeme yönteminin süresi doluyor</div>
    <div class="mrd-alert__body">1 Ekim'den önce güncelle.</div>
  </div>
</div>

Card ve table

html

<article class="mrd-card" data-variant="outline" data-padding="md">…</article>

<div class="mrd-table-frame">
  <table class="mrd-table" data-density="md">
    <thead class="mrd-table__head"><tr class="mrd-table__row"><th class="mrd-table__header" scope="col">Ad</th></tr></thead>
    <tbody class="mrd-table__body"><tr class="mrd-table__row"><td class="mrd-table__cell">Northwind</td></tr></tbody>
  </table>
</div>

Diğer her şeyin markup'ını bulmak

React component'ini bir kez render'la ve HTML'ini tarayıcının eleman denetleyicisinden kopyala. Çıktı kararlıdır; sınıf ve attribute adları Merid'in herkese açık API'sinin parçasıdır (Sürümleme). Her component sayfası sınıflarını ve data attribute'larını Stil verme başlığı altında da listeler.