Switched to a new branch

Thinking...

Conversation compacted

Explored 4 files

Instalasi

npx shadcn-vue@latest add marker

Penggunaan

<script setup lang="ts">
import { Marker, MarkerContent, MarkerIcon, } from '@/components/ui/marker'
</script>

<template>
  <Marker>
    <MarkerIcon>
      <CheckIcon />
    </MarkerIcon>
    <MarkerContent>Explored 4 files</MarkerContent>
  </Marker>
</template>

Komposisi

Susunan berikut adalah cara membangun sebuah marker:

Marker
├── MarkerIcon
└── MarkerContent

Fitur

• Tersedia varian marker sebaris, baris bergaris tepi, dan pemisah berlabel.
• Slot ikon dekoratif yang disembunyikan dari teknologi bantu.
• Elemen akar polimorfik lewat render, untuk marker berupa tautan dan tombol.
• Bisa dipadukan dengan utility shimmer untuk teks status yang mengalir.
• Style tiap bagian bisa disesuaikan lewat prop class.

Contoh

Varian

Pakai variant untuk berpindah antara marker sebaris, baris bergaris tepi, dan pemisah berlabel.

A default marker for inline notes.

A separator marker

A border marker for row boundaries.

Variant	Description
default	An inline marker for status, notes, and actions.
border	A default marker with a bottom border under the row.
separator	A centered label with divider lines on each side.

Status

Isi role="status" dan sertakan Spinner pada marker yang sedang berjalan, supaya pembaruannya ikut dibacakan.

Compacting conversation

Running tests

Shimmer

Tambahkan utility class shimmer pada MarkerContent untuk efek teks mengalir. Cara pemasangannya ada di dokumentasi shimmer.

Thinking...

Reading 4 files

Separator

Pakai varian separator untuk pembatas berlabel di dalam percakapan, misalnya tanggal atau jeda antar bagian.

Today

Worked for 42s

Conversation compacted

Garis Tepi

Pakai varian border untuk baris status yang tetap mengikuti perataan marker bawaan sekaligus memisahkan baris berikutnya.

Switched to release-candidate

Reviewed 8 related files

Opened implementation notes

Dengan Ikon

Pakai MarkerIcon untuk menampilkan ikon di samping konten. Pakai flex-col kalau ikonnya ingin ditumpuk di atas konten.

Switched to a new branch

Explored 4 files

Syncing completed

Tautan dan Tombol

Ubah marker menjadi tautan atau tombol lewat prop render pada Marker.

View the pull request

import { Marker, MarkerContent } from "@/components/ui/marker"

<template>
  <Marker as-child>
    <a href="#links-and-buttons">
      <MarkerIcon>
        <GitBranchIcon />
      </MarkerIcon>
      <MarkerContent>View the pull request</MarkerContent>
    </a>
  </Marker>
</template>

Aksesibilitas

Marker bersifat presentasional secara bawaan. Makna yang tepat bergantung pada cara Anda memakainya, jadi pilih role sesuai maksudnya, bukan mengandalkan satu nilai bawaan.

Status dan Progres

Untuk marker yang sedang berjalan seperti "Sedang berpikir..." atau tool yang aktif, isi role="status" supaya teknologi bantu membacakan pembaruannya begitu muncul. Marker meneruskan role ke elemen di baliknya.

<Marker role="status">
  <MarkerIcon>
    <Spinner />
  </MarkerIcon>
  <MarkerContent>Compacting conversation</MarkerContent>
</Marker>

Pemisah Berlabel

Pemisah yang memuat teks — misalnya tanggal atau label bagian — tidak butuh role. Garis pembatasnya hanya pseudo-element CSS yang dekoratif, dan teksnya dibacakan sebagai konten biasa.

<Marker variant="separator">
  <MarkerContent>Today</MarkerContent>
</Marker>

Catatan: jangan menambahkan role="separator" pada pembatas berlabel. Sebuah separator mengambil nama aksesibelnya dari aria-label, bukan dari teksnya, dan isinya dianggap presentasional — sehingga label yang terlihat justru tidak akan dibacakan. Simpan role="separator" untuk pembatas yang memang tanpa teks bermakna.

Marker Bergaris Tepi

Marker bergaris tepi punya makna yang sama dengan marker biasa. Garis bawahnya dekoratif, jadi pilih role="status", render, atau tanpa role sama sekali, sesuai tujuan markernya.

<Marker variant="border">
  <MarkerIcon>
    <FileTextIcon />
  </MarkerIcon>
  <MarkerContent>Opened implementation notes</MarkerContent>
</Marker>

Ikon Dekoratif

MarkerIcon bersifat dekoratif dan disembunyikan dari teknologi bantu lewat aria-hidden, jadi maknanya dipegang MarkerContent di sebelahnya. Untuk marker yang hanya berisi ikon, berilah aria-label atau teks yang terlihat supaya tidak terbaca kosong.

<Marker aria-label="Synced">
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
</Marker>

Marker yang Interaktif

Kalau marker berfungsi sebagai tautan atau pemicu aksi, tampilkan sebagai <button> atau <a> sungguhan lewat prop render, supaya bisa di-focus dan punya role yang benar. Nama aksesibelnya diambil dari teks marker.

<Marker as-child>
  <a href="/files" >
    <MarkerIcon>
      <FileTextIcon />
    </MarkerIcon>
    <MarkerContent>Explored 4 files</MarkerContent>
  </a>
</Marker>

Referensi API

Marker

Elemen akar marker. Berkasnya juga mengekspor markerVariants supaya style marker bisa Anda pakai ulang di komponen sendiri.

Prop	Type	Default	Description
variant	"default" | "border" | "separator"	"default"	The marker layout.
render	ReactElement | function	-	Render as a different element, such as a link.
class	string	-	Additional classes to apply to the root element.

MarkerIcon

Slot ikon dekoratif. Disembunyikan dari teknologi bantu lewat aria-hidden.

Prop	Tipe	Bawaan	Description
class	string	-	Additional classes to apply to the icon slot.

MarkerContent

Isi teks marker.

Prop	Tipe	Bawaan	Description
class	string	-	Additional classes to apply to the content slot.