Browser

#Basic usage

<script setup lang="ts">
import { Browser } from "@bysages/vue";
</script>

<template>
  <Browser class="w-full max-w-125">
    <Browser.TitleBar>
      <Browser.Dots />
      <Browser.UrlBar>https://elements.bysages.com</Browser.UrlBar>
    </Browser.TitleBar>
    <Browser.Body class="flex h-40 items-center justify-center text-sm text-tertiary">
      Whatever the site hangs in the window
    </Browser.Body>
  </Browser>
</template>

#Props

#BrowserRoot

A styled part — no props of its own; it takes the anatomy's shared styling.

#BrowserTitlebar

A styled part — no props of its own; it takes the anatomy's shared styling.

#BrowserUrlbar

A styled part — no props of its own; it takes the anatomy's shared styling.

#BrowserBody

A styled part — no props of its own; it takes the anatomy's shared styling.

#SBrowserDots

The three lamps are the system's own fixed pigments — the same semantics reserved for danger, warning, and success.

A styled part — no props of its own; it takes the anatomy's shared styling.