Disclosure 折叠面板

1"use client";2// Independent React adaptation of the excluded pinned Native-preview source.3import { PreviewDisclosure } from "./render-function";4export function Basic() {5  return <PreviewDisclosure />;6}

1"use client";2// React adaptation of HeroUI v3.2.6 (e385ac2), Apache-2.0. Native preview content is a reference, not an embedded Native runtime.3import { QrCode } from "@gravity-ui/icons";4import { Button, Disclosure } from "@lenso/ui";5import { Icon } from "@iconify/react";6import { useState } from "react";7import * as stylex from "@stylexjs/stylex";8import { nativeReferenceStyles as styles } from "./native-reference.stylex";9export function PreviewDisclosure({ composed = false }: { composed?: boolean }) {10  const [open, setOpen] = useState(true);11  return (12    <div {...stylex.props(styles.root)}>13      <Disclosure14        open={open}15        onOpenChange={setOpen}16        render={composed ? <div data-custom="foo" /> : undefined}17      >18        <Disclosure.Heading>19          <Disclosure.Trigger render={<Button variant="secondary" />}>20            <Button.Icon>21              <QrCode />22            </Button.Icon>23            Preview HeroUI Native24            <Disclosure.Indicator />25          </Disclosure.Trigger>26        </Disclosure.Heading>27        <Disclosure.Content28          render={composed ? (props) => <div {...props} data-custom="bar" /> : undefined}29        >30          <Disclosure.Body xstyle={styles.body}>31            <p {...stylex.props(styles.muted)}>32              Scan this QR code with your camera app to preview the HeroUI native components.33            </p>34            <img35              alt="Expo Go QR Code"36              src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/images/qr-code-native.png"37              {...stylex.props(styles.qr)}38            />39            <p {...stylex.props(styles.muted)}>Expo must be installed on your device.</p>40            <Button variant="primary" xstyle={styles.action}>41              <Button.Icon>42                <Icon icon="tabler:brand-apple-filled" />43              </Button.Icon>44              Download on App Store45            </Button>46          </Disclosure.Body>47        </Disclosure.Content>48      </Disclosure>49    </div>50  );51}52export function RenderFunction() {53  return <PreviewDisclosure composed />;54}

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0.3import { ShoppingBag } from "@gravity-ui/icons";4import { Button, Disclosure } from "@lenso/ui";5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { styles } from "./source.stylex";8export function CustomStyles() {9  const [open, setOpen] = useState(false);10  return (11    <div {...stylex.props(styles.root)}>12      <Disclosure open={open} onOpenChange={setOpen}>13        <Disclosure.Heading>14          <Disclosure.Trigger render={<Button variant="ghost" xstyle={styles.trigger} />}>15            <span {...stylex.props(styles.label)}>16              <ShoppingBag {...stylex.props(styles.icon)} />17              Shipping details18            </span>19            <Disclosure.Indicator xstyle={styles.indicator} />20          </Disclosure.Trigger>21        </Disclosure.Heading>22        <Disclosure.Content>23          <Disclosure.Body xstyle={styles.body}>24            Orders ship within 2 business days. Standard delivery takes 3–5 days; express is25            available at checkout.26          </Disclosure.Body>27        </Disclosure.Content>28      </Disclosure>29    </div>30  );31}