nsh/base

nsh/base ऐप के UI की बेस कंपोनेंट लेयर है: बिना स्टाइल वाले कंपोनेंट, जो हर प्लेटफ़ॉर्म पर व्यवहार, स्टेट, फ़ोकस और एक्सेसिबिलिटी संभालते हैं। यह प्रिमिटिव (nsh, nsh/mobile और nsh/desktop) और ऐप की अपनी कंपोनेंट लाइब्रेरी के बीच आती है, ठीक वैसे ही जैसे GPUI Kit में gpui-base, gpui और स्टाइल वाली लाइब्रेरी के बीच आता है (देखें Modules)। यह ये सब उपलब्ध कराती है: कंट्रोल (Button, Link, Checkbox, ColorPicker अपने ColorArea, ColorSlider, ColorField, ColorSwatch और ColorEyeDropper के साथ, RadioGroup में NumberInput, Radio, Slider, Switch, Tabs में Tab, ToggleGroup में Toggle, Select, Combobox, Calendar, TimeField, DatePicker), कमांड पैलेट (Command), कंट्रोल की बार (Toolbar अपने ToolbarGroup और ToolbarSeparator के साथ), ऐप के अपने रूप वाले स्क्रोल बार (Scrollbar), फैलने और सिकुड़ने वाले क्षेत्र (Collapsible, और Accordion अपने AccordionItem, AccordionHeader, AccordionTrigger और AccordionPanel के साथ), प्रोग्रेस बार (Progress), एक-बार वाले कोड (OtpInput), किसी सेट के पेज (Pagination), ऐसे आइटम जिनमें आइटम होते हैं (Tree), चार्ट बनाने वाले हिस्से (Plot के साथ Line, Area, Bar, Rule, Dot, Cell, Grid, Pie और Arc, nsh/base/plot में), यूज़र द्वारा सजाए जाने वाले वर्कस्पेस (ResizablePanelGroup में ResizablePanel, और DockArea के स्प्लिट, टैब ग्रुप और डॉक), कैरोसेल (Carousel और उसके हिस्से), Markdown या HTML के दस्तावेज़ (TextView), कोड एडिटर (Editor), टेक्स्ट के बीच के बदलाव (DiffView) और पंक्तियों और स्तंभों की टेबल (Table और उसके हिस्से, DataTable), टेक्स्ट इनपुट (Input), सबसे ऊपर दिखने वाले पॉपअप (Popover, Menu और ContextMenu अपने MenuItem, MenuSeparator और Submenu के साथ, Tooltip, Sheet), टोस्ट (ToastStack में Toast, उनका लाइफ़साइकिल ToastManager में), नेविगेशन (createNavStack से बनाई गई स्टेट से चलने वाला NavPage का NavStack, और बाकी सब कुछ के ऊपर प्रस्तुत होने वाली सामग्री के लिए Dialog) और सिस्टम के अलर्ट डायलॉग (AlertDialog)। पेज और डायलॉग स्टेटस बार भी तय करते हैं (statusBar)।

// Navigation: a stack of pages with header options, pushed and popped; in a
// wide window the inbox and the open message side by side (master–detail).
import { type JSX, mount, signal, Text, View } from "nsh";
import { createNavStack, NavPage, NavStack } from "nsh/base";
import { button, buttonText, focusRing, hoverFill, size, tint, ui, wide } from "./palette";

function Button(props: { title: string; variant?: "primary" | "secondary"; onPress: () => void }) {
  const kind = () => (props.variant !== "secondary" ? "primary" : "secondary");
  return (
    <View role="button" onPress={props.onPress} {...button(kind())}>
      <Text style={buttonText(kind())}>{props.title}</Text>
    </View>
  );
}

type Route = { name: "home" } | { name: "detail"; id: number };

const nav = createNavStack<Route>([{ name: "home" }]);

// The page's own header where NSH draws none (the web, the desktops); iOS and
// Android show the system's, from `title` and `headerRight`.
function Header(props: { title: string; right?: JSX.Element }) {
  return (
    <View style={{ backgroundColor: ui().page, borderBottomWidth: 1, borderBottomColor: ui().line }} class="h-12 flex-row items-center px-2">
      <View class="w-20 flex-row">
        <If when={nav.routes().length > 1}>
          <View role="button" accessibilityLabel="Back" onPress={() => nav.pop()} hoverStyle={hoverFill()} focusStyle={focusRing()} class="rounded-md px-2 py-1 active:opacity-60">
            <Text style={{ fontSize: 17, color: ui().accent }}>‹ Back</Text>
          </View>
        </If>
      </View>
      <Text style={{ numberOfLines: 1, fontSize: 17, fontWeight: "600", color: ui().text }} class="flex-1 text-center">
        {props.title}
      </Text>
      <View class="w-20 flex-row justify-end px-2">{props.right}</View>
    </View>
  );
}

// A page's content: a column as wide as a phone, centered in a wider window.
function Body(props: { children: JSX.Element }) {
  return (
    <View style={{ flex: 1, backgroundColor: ui().page, padding: 16, paddingTop: 24 }}>
      <View style={{ width: "100%", maxWidth: 480, alignSelf: "center", gap: 12 }}>{props.children}</View>
    </View>
  );
}

function Home() {
  const opened = signal(0);
  return (
    <NavPage title="Inbox" header={<Header title="Inbox" />}>
      <Body>
        <Text style={{ color: ui().muted }}>{`Opened ${opened()} messages`}</Text>
        <Button
          title="Open message 1"
          onPress={() => {
            opened.set(opened() + 1);
            nav.push({ name: "detail", id: 1 });
          }}
        />
        <Button title="Open message 2" variant="secondary" onPress={() => nav.push({ name: "detail", id: 2 })} />
      </Body>
    </NavPage>
  );
}

function Detail(props: { id: number }) {
  const starred = signal(false);
  const star = () => (
    <Text onPress={() => starred.set(!starred())} style={{ fontSize: 17, color: ui().accent }} hoverStyle={hoverFill()} focusStyle={focusRing()} activeStyle={{ opacity: 0.7 }}>
      {starred() ? "★" : "☆"}
    </Text>
  );
  return (
    <NavPage title={`Message ${props.id}`} headerRight={star()} header={<Header title={`Message ${props.id}`} right={star()} />}>
      <Body>
        <Text style={{ color: ui().text }}>{`The body of message ${props.id}.`}</Text>
        <Button title="Next message" onPress={() => nav.push({ name: "detail", id: props.id + 1 })} />
        <Button title="Back to the inbox" variant="secondary" onPress={() => nav.popToRoot()} />
      </Body>
    </NavPage>
  );
}

const messages = [1, 2, 3, 4, 5, 6];

/** A wide window: the inbox on the start side, the selected message beside it. */
function Inbox() {
  const selected = signal(1);
  const starred = signal<number[]>([]);
  const star = (id: number) => (
    <Text
      onPress={() => starred.set(starred().includes(id) ? starred().filter((s) => s !== id) : [...starred(), id])}
      style={{ fontSize: 17, color: ui().accent }}
      hoverStyle={hoverFill()}
      focusStyle={focusRing()}
      activeStyle={{ opacity: 0.7 }}
    >
      {starred().includes(id) ? "★" : "☆"}
    </Text>
  );
  return (
    <View style={{ flex: 1, flexDirection: "row", backgroundColor: ui().page }}>
      <View style={{ width: 320, borderRightWidth: 1, borderRightColor: ui().line }}>
        <Header title="Inbox" />
        <View style={{ padding: 8, gap: 2 }}>
          <Each of={messages}>
            {(id) => (
              <View
                role="button"
                onPress={() => selected.set(id())}
                hoverStyle={selected() === id() ? undefined : hoverFill()}
                style={{
                  height: size.row + 12,
                  paddingHorizontal: 12,
                  borderRadius: 8,
                  justifyContent: "center",
                  gap: 2,
                  backgroundColor: selected() === id() ? tint(ui().accent, 0.14) : "transparent",
                }}
                focusStyle={focusRing()}
                activeStyle={{ opacity: 0.7 }}
              >
                <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                  <Text style={{ flex: 1, fontSize: size.label, fontWeight: "600", color: ui().text }}>{`Message ${id()}`}</Text>
                  <Text style={{ fontSize: 12, color: ui().accent }}>{starred().includes(id()) ? "★" : ""}</Text>
                </View>
                <Text style={{ numberOfLines: 1, fontSize: 12, color: ui().muted }}>{`The body of message ${id()}.`}</Text>
              </View>
            )}
          </Each>
        </View>
      </View>
      <View style={{ flex: 1, minWidth: 0 }}>
        <Header title={`Message ${selected()}`} right={star(selected())} />
        <View style={{ padding: 24, gap: 12 }}>
          <Text style={{ color: ui().text }}>{`The body of message ${selected()}.`}</Text>
          <Text style={{ fontSize: 13, color: ui().muted }}>Click a message on the left; on a phone it opens as a page of a NavStack.</Text>
          <Button title="Next message" onPress={() => selected.set(selected() === messages.length ? 1 : selected() + 1)} />
        </View>
      </View>
    </View>
  );
}

function App() {
  return (
    <>
      {() =>
        wide() ? (
          <Inbox />
        ) : (
          <NavStack state={nav} style={{ flex: 1 }}>
            {(route) => (route.name === "home" ? <Home /> : <Detail id={route.id} />)}
          </NavStack>
        )
      }
    </>
  );
}

mount(App);

बेस सेट में Avatar और AvatarGroup भी शामिल हैं: नेटिव इमेज-लोडिंग स्टेट वाली तस्वीरें, और एक पंक्ति जो अपने पहले limit अवतार दिखाती है।

रूप ऐप का अपना होता है: पेज, डायलॉग या हेडर के अंदर जो कुछ जाता है वह आपका अपना JSX है, जिसे प्रिमिटिव से स्टाइल, Tailwind क्लास और आपकी थीम के साथ बनाया जाता है, या आपके अपने crate के Rust कंपोनेंट, या कोई ऐसी कंपोनेंट लाइब्रेरी जिसे समुदाय nsh/base पर बनाता है। हर होस्ट nsh/base उपलब्ध कराता है; Rust ऐप nsh-base crate (nsh_base::{button, dialog, …}) से यही API इस्तेमाल करते हैं।

use nsh_base::{
    MarkdownExtension, MarkdownOptions, accordion, accordion_header, accordion_item, accordion_panel, accordion_trigger,
    alert_dialog, button, carousel, carousel_content, carousel_item, carousel_next,
    carousel_pagination, carousel_pagination_item, carousel_previous, checkbox, color_area, color_field, color_picker,
    color_slider, color_swatch, dialog, diff_view, dock_area, editor, hover_card, link,
    calendar, combobox, command, date_picker, h_resizable, nav_page, nav_stack, radio, radio_group, resizable_panel, select, switch, tab, tabs, text_view, theme, time_field, toast, toast_stack, toggle, toggle_group, toolbar, toolbar_group, toolbar_separator, tree, v_resizable,
};

import {
  Accordion,
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
  AccordionTrigger,
  AlertDialog,
  Avatar,
  AvatarGroup,
  Button,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPagination,
  CarouselPaginationItem,
  CarouselPrevious,
  Checkbox,
  Collapsible,
  ColorArea,
  ColorEyeDropper,
  ColorField,
  ColorPicker,
  ColorSlider,
  ColorSwatch,
  ContextMenu,
  createNavStack,
  DataTable,
  Dialog,
  DiffView,
  DockArea,
  Editor,
  HoverCard,
  Link,
  Menu,
  OtpInput,
  Pagination,
  Progress,
  MenuItem,
  MenuSeparator,
  NavPage,
  NavStack,
  Popover,
  Radio,
  RadioGroup,
  ResizablePanel,
  ResizablePanelGroup,
  Scrollbar,
  Select,
  Combobox,
  Command,
  Calendar,
  TimeField,
  DatePicker,
  Sheet,
  NumberInput,
  Slider,
  Submenu,
  Switch,
  Tab,
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
  Tabs,
  TextView,
  Toast,
  ToastManager,
  ToastStack,
  Toggle,
  ToggleGroup,
  Toolbar,
  ToolbarGroup,
  ToolbarSeparator,
  Tree,
  Tooltip,
} from "nsh/base";
import type {
  AccordionHeaderProps,
  AccordionItemProps,
  AccordionPanelProps,
  AccordionProps,
  AccordionTriggerProps,
  AlertDialogAction,
  AlertDialogOptions,
  AlertDialogPresentation,
  AlertDialogResult,
  AlertDialogRole,
  AvatarGroupProps,
  AvatarProps,
  AvatarStatus,
  ButtonProps,
  CarouselContentProps,
  CarouselControlProps,
  CarouselItemProps,
  CarouselPaginationItemProps,
  CarouselPaginationProps,
  CarouselProps,
  CheckboxProps,
  CollapsibleProps,
  ColorAreaProps,
  ColorChannel,
  ColorFieldProps,
  ColorFormat,
  ColorPickerProps,
  ColorSliderProps,
  ColorSpace,
  ColorSwatchProps,
  DialogChangeReason,
  DataTableColumn,
  DataTableProps,
  DataTableRef,
  DataTableSelection,
  DataTableSort,
  DialogProps,
  DiffAnnotation,
  DiffFile,
  DiffHunk,
  DiffLineRange,
  DiffSeparator,
  DiffStats,
  DiffViewProps,
  DiffViewRef,
  DockAreaLayout,
  DockNode,
  DockRegion,
  EditorDecoration,
  EditorDiagnostic,
  EditorProps,
  EditorRef,
  EditorReplaceAll,
  EditorSearch,
  EditorSearchResult,
  EditorSelection,
  Edges,
  HeaderStyle,
  LinkOpenWith,
  LinkProps,
  NavPageProps,
  NavStackProps,
  NavStackState,
  OtpInputProps,
  PaginationItemState,
  PaginationProps,
  ProgressProps,
  StatusBar,
  RadioGroupProps,
  RadioProps,
  NumberInputProps,
  SelectEntry,
  SelectGroup,
  SelectItem,
  SelectProps,
  ComboboxProps,
  CommandEntry,
  CommandGroup,
  CommandItem,
  CommandProps,
  CalendarProps,
  TimeFieldProps,
  DatePickerProps,
  ScrollbarEntrance,
  ScrollbarLook,
  ScrollbarMode,
  ScrollbarMotion,
  ScrollbarProps,
  ScrollbarTheme,
  SliderProps,
  SliderScale,
  SliderValue,
  StatusBarForeground,
  SwitchProps,
  TabProps,
  TabsProps,
  TextViewProps,
  TextViewDocument,
  MarkdownExtension,
  MarkdownOptions,
  ToastEntry,
  ToastMotion,
  ToastOptions,
  ToastProps,
  ToastStackProps,
  ToastTransitionStatus,
  ToggleGroupProps,
  ToggleProps,
  ToolbarProps,
  TreeEntry,
  TreeItem,
  TreeProps,
} from "nsh/base";

यह पेज मॉड्यूल का इंडेक्स है: हर कंपोनेंट का अपना एलिमेंट पेज है, जिसमें उसके उदाहरण, props और प्लेटफ़ॉर्म नोट हैं। विस्तृत मार्गदर्शन के लिए Navigation guide और Forms and keyboard देखें।

Rust में theme() ऐप की थीम को डिज़ाइन टोकन (theme().primary, theme().radius) के रूप में पढ़ता है, ये वही टोकन हैं जो TSX की थीम क्लास इस्तेमाल करती हैं।

#कंट्रोल

#Button

प्रेस का ऐसा लक्ष्य जो अपना व्यवहार खुद संभालता है और जिसका कोई रूप नहीं होता: प्रेस, disabled और selected स्टेट और स्क्रीन रीडर के लिए उसका रोल। उसका रूप ऐप का अपना class और स्टेट वेरिएंट वाला style है, और उसकी सामग्री उसके children हैं। देखें Button।

#Link

प्रेस का ऐसा लक्ष्य जो कहीं ले जाता है और जिसका कोई रूप नहीं होता: प्रेस, कीबोर्ड फ़ोकस रहने पर Return और Space, disabled स्टेट, स्क्रीन रीडर के लिए link रोल और नेविगेशन का मौजूदा पेज (current)। href वह जगह है जहाँ वह ले जाता है, जो कभी दिखाई नहीं देती: प्रेस उसे रिपोर्ट करता है (onOpen), फिर ऐप के बाहर कोई वेब पेज या किसी दूसरे ऐप का लिंक खोलता है, या openWith="app" के साथ खोलने का काम ऐप के अपने रूट पर छोड़ देता है। देखें Link।

#Checkbox

checked, unchecked या indeterminate कंट्रोल, जो अपना व्यवहार खुद संभालता है और जिसका कोई रूप नहीं होता: प्रेस, कीबोर्ड एक्टिवेशन, disabled स्टेट और स्क्रीन रीडर के लिए checkbox रोल और मान (indeterminate होने पर mixed), जबकि मान ऐप के पास रहता है (checked, indeterminate, onChange)। ऐप checkbox और उसके इंडिकेटर को स्टाइल करता है, जिसकी checked:, indeterminate: और disabled: क्लास checkbox के साथ बदलती हैं, और इंडिकेटर में अपना चिह्न रखता है (indicator)। देखें Checkbox।

#Radio और RadioGroup

ऐसे सेट का एक विकल्प जिसमें से यूज़र ठीक एक चुनता है, और उनके आसपास का सेट। radio अपना व्यवहार खुद संभालता है और उसका कोई रूप नहीं होता: प्रेस, कीबोर्ड एक्टिवेशन, disabled स्टेट और स्क्रीन रीडर के लिए radio रोल और checked स्टेट। समूह वह radio group है जिसकी घोषणा स्क्रीन रीडर करते हैं और वह कोई मान नहीं रखता: ऐप हर radio को बताता है कि वह checked है या नहीं (checked), और unchecked पर प्रेस इसकी माँग करता है (onChange)। ऐप का इंडिकेटर और लेबल radio के children हैं, जिनकी group-checked: क्लास उसके साथ बदलती हैं। देखें Radio।

#Switch

on / off कंट्रोल, जो अपना व्यवहार खुद संभालता है और जिसका कोई रूप नहीं होता: प्रेस, कीबोर्ड एक्टिवेशन, disabled स्टेट और स्क्रीन रीडर के लिए switch रोल और मान, जबकि मान ऐप के पास रहता है (checked, onChange)। ऐप switch, उसके ट्रैक और उसके थंब को स्टाइल करता है, जिनकी checked: और disabled: क्लास switch के साथ बदलती हैं। देखें Switch।

#Tab और Tabs

टैब सूची के टैब और उनके आसपास की सूची। tab अपना व्यवहार खुद संभालता है और उसका कोई रूप नहीं होता: प्रेस, कीबोर्ड एक्टिवेशन, disabled स्टेट और स्क्रीन रीडर के लिए tab रोल और selected स्टेट। सूची वह tab list है जिसकी घोषणा स्क्रीन रीडर करते हैं और वह कोई मान नहीं रखती: ऐप हर tab को बताता है कि वह चुना गया है या नहीं (selected), प्रेस सुनता है (onPress) और चुने गए सेक्शन की सामग्री खुद दिखाता है। ऐप का लेबल tab का child है, जिसकी group-selected: क्लास उसके साथ बदलती हैं। सूची का इंडिकेटर (indicatorClass, indicatorStyle), जो अंडरलाइन या पिल होता है और जिसे ऐप स्टाइल करता है, चुने गए tab पर बैठता है और नेटिव रूप से अगले tab पर कूद जाता है। देखें Tabs।

#Carousel

स्लाइड एक समय में एक जगह दिखाई जाती हैं (किसी उत्पाद की फ़ोटो, ऑनबोर्डिंग, बैनर, कार्ड्स की एक पंक्ति)। कंटेंट एक नेटिव स्क्रॉल व्यू है जो स्लाइडों की शुरुआत पर स्नैप होता है, इसलिए उंगली, व्हील और टचपैड उन्हें पॉइंटर के उसी फ़्रेम में हिलाते हैं; रुकने पर carousel दिखाई गई स्लाइड को onChange से रिपोर्ट करता है। पिछला और अगला (CarouselPrevious, CarouselNext), पेजिनेशन (CarouselPaginationItems एक CarouselPagination में, ऐसे इंडिकेटर के साथ जो दिखाई गई स्लाइड तक स्प्रिंग की तरह जाता है) और ऐरो कीज़ इसे नेटिव रूप से चलाते हैं, सिरों के पार भी निर्बाध रूप से, looping के साथ। दिखाई गई स्लाइड ऐप की index है, जिसे ऐप का अपना टाइमर उन स्लाइडों के लिए आगे बढ़ाता है जो अपने आप आगे बढ़ती हैं (onDragStart / onDragEnd, onFocus / onBlur बताते हैं कि कब रुकना है); लुक और हर लेबल ऐप का अपना है। देखें Carousel।

#Toggle and ToggleGroup

एक बटन जो ऑन या ऑफ होता है (बोल्ड, पसंदीदा, व्यू का कोई विकल्प), और ऐसे बटनों का एक टूलबार। Toggle अपना व्यवहार खुद संभालता है और उसका कोई लुक नहीं होता: प्रेस, कीबोर्ड से सक्रिय करना, disabled स्थिति, और स्क्रीन रीडर के लिए pressed स्थिति के साथ बटन की भूमिका। ग्रुप वह टूलबार है जिसे स्क्रीन रीडर घोषित करते हैं; वह कीबोर्ड फ़ोकस का एक ठहराव है जिसकी ऐरो कीज़ toggles को दबाए बिना उनके बीच जाती हैं, और उसमें कोई वैल्यू नहीं होती: ऐप हर toggle को बताता है कि वह pressed है या नहीं (pressed), वह वैल्यू सुनता है जो toggle माँगता है (onChange), और चाहे जितने toggles pressed रखे या ठीक एक। ग्रुप पर disabled उसके हर toggle को disable कर देता है। ऐप का आइकन या लेबल toggle के children होते हैं, जिनकी group-aria-pressed: क्लासेज़ उनके साथ चलती हैं। देखें Toggle।

#Toolbar, ToolbarGroup and ToolbarSeparator

नियंत्रणों की एक बार: टेक्स्ट एडिटर की फ़ॉर्मैटिंग, मीडिया प्लेयर के ट्रांसपोर्ट बटन, टूल्स का एक वर्टिकल पैलेट। टूलबार वह है जिसे स्क्रीन रीडर घोषित करते हैं (नाम accessibilityLabel से दिया जाता है), और उसके अंदर के Button, Toggle और Link पर कीबोर्ड फ़ोकस का एक ठहराव: Tab उस आइटम पर प्रवेश करता है जिसे उसने आख़िरी बार छोड़ा था, उसके axis की ऐरो कीज़ उसके साथ-साथ चलती हैं और Home तथा End उसके सिरों पर कूदती हैं, कुछ भी दबाए बिना। ToolbarGroup संबंधित आइटमों की एक नामित शृंखला है (undo और redo, कोई alignment), और टूलबार के अंदर का ToggleGroup उसके ग्रुपों में से एक है, और उसके toggles टूलबार के आइटम हैं। ToolbarSeparator वह रेखा है जो ऐप शृंखलाओं के बीच खींचता है। टूलबार या ग्रुप पर disabled उसके हर आइटम को disable कर देता है। टूलबार में कोई वैल्यू नहीं होती और उसका कोई लुक नहीं होता: हर नियंत्रण अपनी स्थिति खुद रखता है, और बार, उसके ग्रुपों और separators की स्टाइलिंग ऐप करता है। देखें Toolbar।

#Select

आइटमों की एक सूची में से एक वैल्यू चुनना, जहाँ सूची डेटा के रूप में दी जाती है (items: हर एक में एक वैल्यू और एक शीर्षक, वैकल्पिक रूप से disabled या किसी सेक्शन में), बिना किसी लुक के। ऐप का trigger सूची खोलता है: डेस्कटॉप पर trigger के पास एक popup, फ़ोन और टैबलेट पर नीचे एक sheet। Select कीबोर्ड (Up, Down, Home, End, Page Up और Down, typeahead, Return और Escape), खोज (searchable), हाइलाइट की गई पंक्ति (itemClass पर focus:; renderItem को मिलता है कि आइटम क्या है, उसकी स्थिति कभी नहीं) और स्क्रीन रीडर के लिए combobox, listbox और option भूमिकाओं को संभालता है। वैल्यू ऐप की होती है (value, onChange) या वह उसे select पर छोड़ देता है (defaultValue), और ऐप हर हिस्से को स्टाइल करता है या पंक्तियाँ खुद बनाता है। देखें Select।

#Combobox

सूची के आइटमों में से चुनी गई वैल्यूज़, जैसे select की सूची, जो combobox के input में टाइप करने से फ़िल्टर होती है, बिना किसी लुक के: एक, या multiple के साथ कई, जहाँ चुनाव आइटम को toggle करता है और सूची खुली रहती है। वैल्यू एक array है जो ऐप की होती है (value, onChange) या जिसे वह combobox पर छोड़ देता है (defaultValue); सूची बंद होते समय onConfirm उसे बताता है। क्वेरी ऐप की हो सकती है (query, onQueryChange), पंक्तियों के नीचे एक footer दिखता है और एक clear बटन वैल्यू को खाली कर देता है। देखें Combobox।

#Calendar

महीनों के दिनों में से चुनी गई एक तारीख़, या range के साथ तारीख़ों की एक रेंज, बिना किसी लुक के। एक महीना या कई (numberOfMonths) साथ-साथ दिखते हैं; हेडर उन्हें पलटता है और महीनों का एक व्यू या वर्षों का एक पेज खोलता है। वैल्यू एक ISO तारीख़ ("2026-10-28") या [start, end] होती है, जो ऐप की होती है (value, onChange) या जिसे वह calendar पर छोड़ देता है (defaultValue); disabledMatcher दिनों को चुने जाने से रोकता है, और दिन कीबोर्ड को Tab के एक ठहराव के रूप में लेते हैं। ऐप हिस्सों को स्टाइल करता है और आइटम बनाता है (renderItem, जिसे बताया जाता है कि आइटम क्या है; उसकी स्थितियाँ उसकी क्लासेज़ हैं, रेंज के दिन selected: के साथ data-range-start:, data-range-middle: और data-range-end:)। देखें Calendar।

#TimeField

दिन का एक समय जिसे एक-एक सेगमेंट करके एडिट किया जाता है, बिना किसी लुक के: घंटा, मिनट, सेकंड (precision) और AM/PM (hourCycle="h12"), स्टेपिंग, टाइपिंग या फ़ोन के नंबर पैड से। वैल्यू 24-घंटे की घड़ी पर "HH:MM" ("HH:MM:SS") होती है, ऐप की (value, onChange) या फ़ील्ड की अपनी (defaultValue)। देखें TimeField।

#DatePicker

ऐप के trigger से खुलने वाले calendar से चुनी गई एक तारीख़, जैसे select की सूची खुलती है: डेस्कटॉप पर popup, फ़ोन पर sheet। वैल्यू HTML inputs के रूपों में होती है: ISO तारीख़, range के साथ [start, end] या timePrecision के साथ तारीख़ और समय (calendar के नीचे एक time field), ऐप की (value, onChange) या picker की अपनी (defaultValue)। Presets इसे सेट करते हैं, एक clear बटन इसे साफ़ करता है, और Calendar का हर prop आगे पास हो जाता है। देखें DatePicker।

#Collapsible

एक क्षेत्र जिसका कंटेंट फैलता और सिमटता है, बिना किसी लुक के: उसके children हमेशा दिखते हैं (एक सारांश, trigger), उसका content उनके बाद तब दिखता है जब open हो। open और उसे पलटने वाला trigger ऐप के होते हैं, और ऐप ही वहाँ स्क्रीन रीडर को expanded स्थिति बताता है। कंटेंट एक बार बनता है और सिमटे रहने पर भी बना रहता है, इसलिए उसके अंदर की चीज़ें अपनी स्थिति बनाए रखती हैं। reveal के साथ यह नेटिव रूप से स्प्रिंग जैसी ऊँचाई के साथ खुलता और बंद होता है। देखें Collapsible।

#Accordion

ऊपर-नीचे रखे सेक्शन जो अपने शीर्षकों के नीचे फैलते और सिमटते हैं, बिना किसी लुक के: AccordionItem का एक Accordion, जिनमें हर एक AccordionTrigger और AccordionPanel के चारों ओर एक AccordionHeader है। value, यानी खुले आइटमों की वैल्यूज़, ऐप की होती हैं, और trigger दबाए जाने पर onChange जो रिपोर्ट करता है उसे ऐप सेट करता है: एक समय में एक आइटम, या multiple के साथ कई। स्क्रीन रीडर शीर्षकों का एक समूह सुनते हैं जिनके बटन बताते हैं कि उनका आइटम expanded है या नहीं, और हर खुला पैनल एक region के रूप में सुनाई देता है। reveal के साथ पैनल नेटिव रूप से स्प्रिंग जैसी ऊँचाई के साथ खुलता और बंद होता है; keepMounted के साथ उसका कंटेंट बंद रहने पर भी ट्री में रहता है। देखें Accordion।

#Avatar

किसी व्यक्ति की तस्वीर, बिना किसी लुक के: fallback (name के आद्याक्षर, या ऐप का fallback) और उसके ऊपर तस्वीर, जो लोड होने तक पारदर्शी रहती है, दोनों avatar जितने बड़े, फिर ऐप के children (एक presence dot)। इमेज के अपने load और error इवेंट उसकी स्थिति को नेटिव रूप से बदलते हैं (onStatusChange), और fallbackDelay तस्वीर लोड होते समय fallback को पीछे रखता है। स्क्रीन रीडर नाम के लेबल वाली एक इमेज सुनते हैं। AvatarGroup अपने पहले limit avatars दिखाता है, बाकियों के लिए कोई व्यू नहीं बनाता, और जब total अधिक हों तब अपना overflow दिखाता है। देखें Avatar।

#Progress

एक रैखिक प्रोग्रेस बार, बिना किसी लुक के: एक track जिसके अंदर एक indicator है, और indicator track की चौड़ाई का value प्रतिशत है। value (0 से 100) और indeterminate ऐप के होते हैं; स्क्रीन रीडर को progress bar की भूमिका, रेंज और वैल्यू मिलती है, और indeterminate रहने पर कोई वैल्यू नहीं मिलती, जब indicator की चौड़ाई और गति ऐप की होती है। देखें Progress।

#NumberInput

एक फ़ील्ड में टाइप की गई या स्टेप की गई संख्या, बिना किसी लुक के: फ़ील्ड (Input), उसके पहले decrement और उसके बाद increment (या दोनों दाईं ओर एक कॉलम में, controlsRight)। value (एक संख्या या null; या input defaultValue से अपनी खुद की रखता है) ऐप का होता है और onChange उस संख्या के साथ सुनता है जो फ़ील्ड पढ़ता है। फ़ील्ड एक संख्या या संख्या तक पहुँचता हुआ टेक्स्ट लेता है, दूसरे कीबोर्ड के अंक और चिह्न भी शामिल; बटन, Up / Down और Page Up / Page Down इसे step से स्टेप करते हैं, दशमलव बनाए रखते हुए, min और max तक, और फ़ील्ड छोड़ने पर टाइप की गई वैल्यू उनके भीतर रोक दी जाती है। फ़ील्ड स्क्रीन रीडर के लिए एक spin button है, जिसके increment और decrement उसे स्टेप करते हैं। देखें NumberInput।

#Slider

एक track पर चुनी गई एक वैल्यू, या दो की रेंज, बिना किसी लुक के: एक track जो प्रेस और ड्रैग लेता है, उसके अंदर indicator जिस पर वैल्यूज़ मैप होती हैं, रेंज और उस पर हर वैल्यू के लिए एक thumb। value (एक संख्या या [start, end]; या slider defaultValue से अपनी खुद की रखता है) ऐप का होता है और हर नई वैल्यू के लिए onChange सुनता है, जो min से शुरू होकर step पर snap होती है, और हर बदलाव पर एक बार onChangeEnd; scale वैल्यूज़ को रैखिक रूप से या परिमाण के क्रमों के अनुसार फैलाता है, axis track को क्षैतिज या ऊर्ध्वाधर बिछाता है। हर thumb स्क्रीन रीडर के लिए अपनी वैल्यू वाला एक adjustable element है, कीबोर्ड फ़ोकस का एक ठहराव है, और WAI-ARIA की slider कीज़ से चलता है। देखें Slider।

#Scrollbar

किसी स्क्रॉल व्यू या सूची के लिए ऐप के अपने लुक वाला स्क्रॉल बार, जिसे ऐप जहाँ चाहे वहाँ रखता है, बिना किसी लुक के: एक track (बार का class) और उसमें एक thumb (thumbClass)। यह अपने स्क्रॉल व्यू को नाम से पहचानता है (scroll, उसका ref) और उसके offset, कंटेंट और viewport का अनुसरण करता है; thumb को ड्रैग करने से कंटेंट स्क्रॉल होता है, track पर प्रेस करने से thumb का मध्य वहाँ आ जाता है। mode इसे तब दिखाता है जब कंटेंट स्क्रॉल होता है (उसके बाद motion.idle तक), जब पॉइंटर बार के ऊपर हो, या हमेशा; axis इसे क्षैतिज बनाता है। Scrollbar.setTheme हर स्क्रॉल व्यू और सूची को उसके viewport के ऊपर ऐप के लुक वाला बार देता है, बिना कुछ रखे, और कोई व्यू अपनी खुद की थीम को अपने scrollbar prop के रूप में ले सकता है। देखें Scrollbar।

#ColorPicker

बिना किसी लुक वाला एक color picker: root रंग को रखता है और उसके अंदर के हिस्से उसे दिखाते और बदलते हैं, जिन्हें ऐप बिछाता है। ColorArea HSB की saturation और brightness है, ColorSlider RGB, HSL, HSB या OKLCH का कोई भी channel या alpha (क्षैतिज या ऊर्ध्वाधर), ColorField किसी भी CSS रूप में रंग या किसी channel की संख्या, ColorSwatch एक preset जिसे प्रेस चुनता है या रंग का एक preview, ColorEyeDropper स्क्रीन पर से रंग चुनने वाला एक बटन (macOS, web)। value ऐप का होता है (या picker defaultValue से अपना खुद का रखता है) और onChange तथा onChangeEnd को रंग और उसके उस टेक्स्ट के साथ सुनता है जैसा format लिखता है; picker हर space के channels को वैसे ही रखता है जैसे उपयोगकर्ता ने सेट किए। thumbs स्क्रीन रीडर के लिए adjustable elements और कीबोर्ड फ़ोकस के ठहराव हैं। देखें ColorPicker।

#OtpInput

निश्चित लंबाई का एक संख्यात्मक वन-टाइम कोड, बिना किसी लुक के: cells के ऊपर एक नेटिव टेक्स्ट फ़ील्ड कीबोर्ड लेता है, इसलिए टाइपिंग, paste, नंबर पैड और सिस्टम का कोड autofill प्लेटफ़ॉर्म के होते हैं, और स्क्रीन रीडर एक टेक्स्ट फ़ील्ड पाते हैं। केवल अंक अंदर जाते हैं, length तक; Backspace आख़िरी अंक हटाता है। value ऐप का होता है (या वह defaultValue देता है) और onChange तथा onComplete सुनता है; वह cells को स्टाइल करता है (अगला अंक लेने वाले पर focus:, अंक रखने वालों पर data-filled:), उनके groups और caret को भी। देखें OtpInput।

#Pagination

किसी सेट के पेज जिनके बीच जाया जाता है, बिना किसी लुक के एक navigation landmark: Previous, पहला और आख़िरी पेज, वर्तमान पेज अपने पड़ोसियों के साथ (visiblePages), हर छूटी हुई शृंखला के लिए एक ellipsis, ऐप के children और Next; compact Previous, children और Next को रखता है। page ऐप का होता है और onChange({ page }) सुनता है; वर्तमान पेज selected: है और स्क्रीन रीडर के लिए current page है। ऐप आइटमों को स्टाइल करता है (itemClass) या उन्हें बनाता है (renderItem)। देखें Pagination।

#Command

एक command palette: ऐप के commands पर एक खोज फ़ील्ड (items: एक id, एक label, keywords, एक group, दिखाने के लिए एक shortcut, disabled, checked), जो उपयोगकर्ता के टाइप करते ही नेटिव रूप से फ़िल्टर होता है (label या कोई keyword क्वेरी रखता है, अक्षरों के केस की अनदेखी करते हुए; जिन सेक्शनों में कोई मेल नहीं होता वे हट जाते हैं), एक virtualized सूची में जो केवल दिखती पंक्तियाँ बनाती है। Up और Down हाइलाइट को हिलाते हैं, Return या प्रेस चुनाव करता है (onSelect({ id })), Escape क्वेरी साफ़ करता है और फिर onCancel रिपोर्ट करता है, जहाँ ऐप उसके चारों ओर के Dialog को बंद करता है। क्वेरी ऐप की होती है (query, onQueryChange) या फ़ील्ड की अपनी; filterable={false} और loading के साथ ऐप उसका उत्तर किसी सर्वर से देता है। ऐप हर हिस्से को स्टाइल करता है (हाइलाइट के लिए focus: के साथ itemClass, checked:, disabled:) और पंक्तियाँ बनाता है (renderItem, जिसे shortcut वैसे ही दिया जाता है जैसा यहाँ दिखाया गया है)। देखें Command।

#Tree

ऐसे आइटम जो आइटम रखते हैं: किसी प्रोजेक्ट की फ़ाइलें, सेटिंग्स का साइडबार, एक आउटलाइन। items डेटा है (TreeItem: एक id, एक label, children, disabled), और पंक्तियाँ virtualized हैं: केवल दिखती पंक्तियाँ बनती हैं, और सिमटे हुए आइटम के children कभी नहीं बनते, इसलिए हज़ारों आइटमों का ट्री भी तेज़ रहता है। expanded ids और चुना हुआ आइटम ऐप के होते हैं (expanded, selected, onExpandedChange और onSelectedChange के साथ) या ट्री अपने खुद के रखता है (defaultExpanded, defaultSelected)। एक प्रेस पंक्ति को चुनता है और फ़ोल्डर को फैलाता या समेटता है; ट्री कीबोर्ड फ़ोकस का एक ठहराव है जिसकी ऐरो कीज़ चयन को हिलाती हैं (Right और Left फैलाती, समेटती हैं, फ़ोल्डर में जाती और उससे निकलती हैं), साथ में Home, End, Return, Space और typeahead। ऐप पंक्तियों को स्टाइल करता है (selected:, aria-expanded:, focus: के साथ itemClass) और उन्हें बनाता है (renderItem, जिसे हर आइटम का depth दिया जाता है)। देखें Tree।

#Plot (nsh/base/plot)

चार्ट जिन हिस्सों से बनते हैं, वे gpui-base के plot की तरह, अपने अलग मॉड्यूल में हैं: import { Plot, Line, Area, Bar, Grid, Pie, Arc, Sankey, Treemap } from "nsh/base/plot". A Plot holds the app’s rows (data, generic over their type, so x and y पंक्ति की चेक की गई कुंजियाँ या फ़ंक्शन हैं), इसके अक्षों के point, linear या band स्केल, पॉइंटर के नीचे की पंक्ति (onHoverChange) और इसकी गति (motion: प्रकट होना, होवर का फ़ेड और ग्लाइड); इसके मार्क पंक्तियों से नेटिव रूप में बनते हैं, प्रति पॉइंट कोई JS नहीं, और SVG पेंट प्रॉपर्टी (stroke-*, fill-*) से रंगे जाते हैं, जहाँ कोई सेट नहीं है वहाँ currentColor। Area या Bar अपनी आकृतियों के भीतर एक बैकग्राउंड (ग्रेडिएंट, bg-linear-*) दिखाता है। बार band स्केल के बैंड में खड़े होते हैं, अगल-बगल या stack में एक के ऊपर एक, प्लॉट के प्रकट होने पर बढ़ते हुए आते हैं और पॉइंटर के नीचे की पंक्ति से दूर फ़ेड हो जाते हैं, हर बार के सिरे पर एक label हिस्सा होता है। होवर की क्रॉस लाइन, डॉट (hoverDotClass के साथ हर मार्क का अपना) और टूलटिप (tooltipPlacement, प्लॉट के भीतर रखा गया) ऐसे हिस्से हैं जिन्हें ऐप स्टाइल करता और भरता है, और जो नेटिव रूप में चलते हैं; अक्ष के लेबल ऐप के अपने एलिमेंट हैं। Pie पूरे घेरे को प्रति पंक्ति एक स्लाइस में बाँटता है (innerRadius वाला डोनट), हर एक अपनी क्लासेज़ (sliceClass, उसकी पंक्ति का एक फ़ंक्शन) से रंगा जाता है, और Arc दो कोणों के बीच एक सेक्टर बनाता है (गेज का ट्रैक और वैल्यू); पाई के ऊपर प्लॉट पॉइंटर के नीचे वाले स्लाइस की सूचना देता है, जो ऊपर उठता है (hoverLift) जबकि बाकी फ़ेड हो जाते हैं (hoverDim)। Sankey पंक्तियों के बीच फ़्लो बनाता है (links), जिन्हें d3-sankey जिस तरह लेआउट करता है उसी तरह रखा जाता है, हर नोड और रिबन अपनी क्लासेज़ से रंगा जाता है, इसके नोड लेबल वाले होते हैं, होवर होते हैं और नए फ़्लो की ओर बढ़ते हैं। Treemap पंक्तियों को नेस्टेड आयतों के पदानुक्रम के रूप में टाइल करता है (id, parent), हर लीफ़ का क्षेत्रफल उसका value होता है, श्रेणी के अनुसार या प्लॉट के colorScale की रैम्प के साथ रंगा जाता है, और इसके लेबल वहाँ दिखते हैं जहाँ वे समा सकें। देखें Plot।

#Workspaces

#ResizablePanelGroup and ResizablePanel

पैनल अगल-बगल या एक के ऊपर एक, हर दो के बीच एक हैंडल के साथ, जिसे उपयोगकर्ता जगह बाँटने के लिए खींचता है। ग्रुप ड्रैग का मालिक है, जो नेटिव रूप में चलता है, साथ ही हर पैनल की सीमाओं (minSize, maxSize) और रीसाइज़ कर्सर का भी; साइज़ ऐप के हैं (size, onResize के साथ रिपोर्ट किए जाते हैं), और हैंडल का रूप और पैनल की सामग्री भी ऐप की है। देखें Resizable।

#DockArea

एक डॉक करने योग्य वर्कस्पेस: टैब ग्रुप में पैनल, अगल-बगल या एक के ऊपर एक बँटे ग्रुप, और बाएँ, दाएँ तथा नीचे के किनारों पर डॉक। लेआउट वह डेटा है जिसका मालिक ऐप है (layout, onLayoutChange के साथ रिपोर्ट किया जाता है); एरिया टैब के ड्रैग और ड्रॉप, रीसाइज़िंग, डॉक, ज़ूम और लॉक का मालिक है, पैनल के हिलने पर हर पैनल की सामग्री को बनाए रखता है, और जगह कम होने पर उसी लेआउट को ड्रॉअर और बॉटम शीट के साथ प्रस्तुत करता है। टैब, हैंडल, ड्रॉप इंडिकेटर और पैनल की सामग्री ऐप की हैं। देखें Dock।

#Documents

#TextView

TextView Markdown, HTML या ऐप द्वारा बनाए गए ब्लॉक का दस्तावेज़ दिखाता है, जिसे Text एलिमेंट और व्यू से बनाया जाता है: हेडिंग, सूचियाँ, कोड, टेबल, इमेज, सूत्र, फ़ुटनोट और ऐप का अपना सिंटैक्स। यह स्ट्रीम होकर आने वाले AI चैट जवाबों के लिए बना है, जिसमें थीम के रंगों में पढ़ने की टाइपोग्राफ़ी है जिसे ऐप हिस्सा-दर-हिस्सा री-स्टाइल करता है, और रेंडर फ़ंक्शन हैं जो ऐप की सामग्री को सही जगह रखते हैं। देखें TextView।

#Code

#Editor

Editor पचास से अधिक भाषाओं के लिए एक कोड एडिटर है: सिंटैक्स हाइलाइटिंग, लाइन नंबर, एक से अधिक कैरेट, फ़ोल्डिंग, सॉफ़्ट रैप, खोजें और बदलें, डायग्नोस्टिक और डेकोरेशन, कोड एडिटरों की कुंजियों के साथ। टेक्स्ट ऐप का है (value और onChange), और फ़ाइंड बार भी, जो एडिटर के search को चलाता है। यह थीम के टोकन से बने रूप के साथ आता है जिसे ऐप हिस्सा-दर-हिस्सा री-स्टाइल करता है। देखें Editor।

#DiffView

DiffView दो टेक्स्ट के बीच के बदलाव, या किसी पैच की फ़ाइलों के बदलाव दिखाता है, जैसा कोड रिव्यू टूल करते हैं: अगल-बगल या एकीकृत, पंक्तियों के भीतर बदले गए शब्द हाइलाइट किए हुए, अपरिवर्तित पंक्तियाँ ऐसे सेपरेटरों में समेटी हुई जो फैल सकते हैं, Editor के सिंटैक्स रंगों में। ऐप की क्रियाएँ हर बदलाव को रखती या पलटती हैं। देखें DiffView।

#Table

Table और इसके हिस्से ऐप द्वारा चिल्ड्रन के रूप में लिखी गई कुछ पंक्तियों को लेआउट करते हैं, और स्क्रीन रीडर को एक टेबल देते हैं: पंक्तियों के ग्रुप, पंक्तियाँ, कॉलम हेडर और सेल। हर हिस्सा ऐप का रूप लेता है। देखें Table।

#DataTable

DataTable पंक्तियाँ और कॉलम दिखाता है और दोनों दिशाओं में स्क्रॉल होता है, चाहे दोनों में से कितने भी हों, और केवल दिखने वाले सेल बनाता है। पंक्तियाँ, कॉलम या सेल चुने जाते हैं; कॉलम रीसाइज़ होते हैं, हिलते हैं, स्थिर रहते हैं और सॉर्ट होते हैं (सॉर्ट ऐप करता है); ऐप पंक्तियाँ एक बार में एक पेज के रूप में देता है और सेल तथा शीर्षक बना सकता है। देखें DataTable।

#Navigation

NavPage का एक NavStack iOS पर UINavigationController है और Android पर टूलबार तथा प्रेडिक्टिव बैक वाला स्टैक; डेस्कटॉप और वेब पर हर पेज ऐप का अपना header दिखाता है। देखें NavStack, जिसमें createNavStack और किसी पेज को छोड़ना भी शामिल है।

#Dialog

Dialog सामग्री को बाकी सब कुछ के ऊपर, स्टैक के हेडर सहित, अपनी नेटिव विंडो लेयर में प्रस्तुत करता है। इसका पॉपअप और बैकड्रॉप ऐप द्वारा स्टाइल किए जाते हैं। देखें Dialog।

#Alert dialogs

#AlertDialog

AlertDialog.show(options) प्लैटफ़ॉर्म का अपना अलर्ट या एक्शन शीट दिखाता है और { action } के साथ रिज़ॉल्व होता है, जो उपयोगकर्ता द्वारा चुनी गई क्रिया का id है। देखें AlertDialog।

#Input

Input प्लैटफ़ॉर्म का नेटिव टेक्स्ट इनपुट है: एक सिंगल-लाइन या मल्टीलाइन फ़ील्ड जिसकी टाइपिंग, कैरेट, चयन, ऑटोकरेक्शन और ऑटोफ़िल प्लैटफ़ॉर्म संभालता है। इसकी वैल्यू और रूप ऐप के हैं। इसके props टाइप InputProps हैं (ios={{…}} के लिए IOSInputProps के साथ), जो इसके साथ एक्सपोर्ट किए जाते हैं। देखें Input।

#Status bar

स्टेटस बार उसका होता है जो स्क्रीन पर है, जैसा UIKit में, जहाँ हर व्यू कंट्रोलर अपना preferredStatusBarStyle घोषित करता है और सबसे ऊपर वाला तय करता है। NSH में पेज और डायलॉग वही व्यू कंट्रोलर हैं: एक NavPage या एक Dialog statusBar से वह स्टेटस बार घोषित करता है जो वह चाहता है, और ऐप अपना डिफ़ॉल्ट nsh.json में घोषित करता है।

use nsh_base::nav_page;
use nsh_core::prelude::*;

fn photo_viewer() -> Screen {
    nav_page().header_visible(false).status_bar(
        StatusBarSetting::default()
            .foreground(StatusBarStyle::Light)
            .hidden(true)
            .animated(true),
    )
}

import { NavPage } from "nsh/base";

function PhotoViewer() {
  return (
    <NavPage headerVisible={false} statusBar={{ foreground: "light", hidden: true, animated: true }}>
      …
    </NavPage>
  );
}

statusBar ये फ़ील्ड लेता है, हर एक वैकल्पिक (Rust में, अकेला StatusBarStyle, या उन्हीं नामों वाले StatusBarSetting के बिल्डर मेथड):

वैल्यू रिएक्टिव है: statusBar={{ foreground: dark() ? "light" : "dark" }} सिग्नल का अनुसरण करता है, वैसे ही जैसे वह Rust क्लोज़र करता है जो किसी सिग्नल को पढ़ता है।

#Which one applies

सबसे हाल में दिखाया गया पेज या डायलॉग फ़ील्ड-दर-फ़ील्ड तय करता है: स्टैक पर पुश किया गया पेज नीचे के पेजों के ऊपर होता है, और खुला डायलॉग पेजों के ऊपर होता है। जो फ़ील्ड वह छोड़ देता है वह उसके नीचे वाले से आता है, और अंत में ऐप के डिफ़ॉल्ट से। जब पेज पॉप होता है या डायलॉग बंद होता है, तो उसके नीचे वाला फिर से लागू होता है।

nav_page()
    .title("Inbox")
    .status_bar(StatusBarStyle::Dark);

// Pushed over it: hidden, with the inbox's dark content when it shows again.
nav_page()
    .title("Photo")
    .status_bar(StatusBarSetting::default().hidden(true));

<NavPage title="Inbox" statusBar={{ foreground: "dark" }}>…</NavPage>

// Pushed over it: hidden, with the inbox's dark content when it shows again.
<NavPage title="Photo" statusBar={{ hidden: true }}>…</NavPage>

#The app’s default

nsh.json का "statusBar" हर पेज और डायलॉग के नीचे की सेटिंग है, जैसे UIKit ऐप में Info.plist का UIStatusBarStyle और UIStatusBarHidden होते हैं:

{
  "statusBar": { "foreground": "light", "hidden": false }
}

दोनों फ़ील्ड वैकल्पिक हैं। इसके बिना सामग्री "auto" होती है और बार दिखता है। पैकेज किए गए iOS ऐप इसे लॉन्च स्क्रीन पर भी दिखाते हैं।

#The status bar on each platform

• iOS: छिपना और दिखना फ़ेड के साथ एनिमेट होता है। किसी नेटिव ऐप में एम्बेड किए गए ऐप में, होस्ट ऐप का व्यू कंट्रोलर तय करता है कि स्टेटस बार कैसा दिखे। होस्ट अपने व्यू कंट्रोलर से NshAppView.preferredStatusBarStyle, NshAppView.prefersStatusBarHidden और NshAppView.preferredStatusBarUpdateAnimation लौटाकर NSH की सेटिंग लागू करता है।
• Android: ऐप किनारे से किनारे तक, स्टेटस बार के पीछे बनते हैं (Android 15, API 35): ऐप का अपना बैकग्राउंड बार का बैकग्राउंड है, और foreground उस पर सामग्री को पढ़ने योग्य रखता है।
• डेस्कटॉप और वेब: विंडो का टाइटल बार और ब्राउज़र के बार सिस्टम और ब्राउज़र के हैं; statusBar और nsh.json का "statusBar" फ़ोन के लिए हैं।

{
  "capabilities": {
    "statusBar": true
  }
}

#Related

• Navigation guide।
• Forms and keyboard।
• Avatar, Button, Carousel, Link, Checkbox, Radio, Switch, Tabs, Toggle, Toolbar, Select, Combobox, Command, Calendar, TimeField, DatePicker, Collapsible, HoverCard, Accordion, Progress, Slider, ColorPicker, Scrollbar, NumberInput, OtpInput, Pagination, Tree, Plot, NavStack, Dialog, AlertDialog, TextView, Editor, DiffView, Table, DataTable, Text और Input। AlertDialog, TextView, Editor, DiffView, Table, DataTable, Text और Input।
• Device and environment।
• BackHandler: BackHandler और अन्य केवल-Android API।