meta__components__en-US.d8ec26b2.async.js

"use strict";(self.webpackChunkHDesign=self.webpackChunkHDesign||[]).push([[9252],{73283:function(l,t,e){var s;e.r(t),e.d(t,{demos:function(){return g}});var r=e(90228),d=e.n(r),h=e(87999),_=e.n(h),a=e(75271),v=e(94287),p=e(63412),g={"autoratiocontainer-demo-demo":{component:a.memo(a.lazy(function(){return e.e(3367).then(e.bind(e,84562))})),asset:{type:"BLOCK",id:"autoratiocontainer-demo-demo",refAtomIds:["AutoRatioContainer"],dependencies:{"index.tsx":{type:"FILE",value:e(44878).Z},HDesign:{type:"NPM",value:"0.0.1"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx",title:"Base",description:"You can try to hold and drag the bottom right corner of the container to resize it."},context:{HDesign:p,react:s||(s=e.t(a,2))},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}}}},87453:function(l,t,e){var s;e.r(t),e.d(t,{demos:function(){return g}});var r=e(90228),d=e.n(r),h=e(87999),_=e.n(h),a=e(75271),v=e(5371),p=e(63412),g={"checkcontainer-demo-type":{component:a.memo(a.lazy(function(){return e.e(5916).then(e.bind(e,36038))})),asset:{type:"BLOCK",id:"checkcontainer-demo-type",refAtomIds:["CheckContainer"],dependencies:{"index.tsx":{type:"FILE",value:e(20165).Z},HDesign:{type:"NPM",value:"0.0.1"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx",title:"type",description:"There are three types of default, radio, and checkbox, and the component defaults to default"},context:{HDesign:p,react:s||(s=e.t(a,2))},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}},"checkcontainer-demo-mode":{component:a.memo(a.lazy(function(){return e.e(5916).then(e.bind(e,16810))})),asset:{type:"BLOCK",id:"checkcontainer-demo-mode",refAtomIds:["CheckContainer"],dependencies:{"index.tsx":{type:"FILE",value:e(34421).Z},HDesign:{type:"NPM",value:"0.0.1"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx",title:"mode",description:"There are three display methods: hover, checked, and always, and the component defaults to checked"},context:{HDesign:p,react:s||(s=e.t(a,2))},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}}}},89710:function(l,t,e){var s;e.r(t),e.d(t,{demos:function(){return g}});var r=e(90228),d=e.n(r),h=e(87999),_=e.n(h),a=e(75271),v=e(2567),p=e(63412),g={"highlighttextarea-demo-demo":{component:a.memo(a.lazy(function(){return e.e(3494).then(e.bind(e,86742))})),asset:{type:"BLOCK",id:"highlighttextarea-demo-demo",refAtomIds:["HighlightTextarea"],dependencies:{"index.tsx":{type:"FILE",value:e(20475).Z},HDesign:{type:"NPM",value:"0.0.1"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx",title:"Base",description:"In this case, the default highlighting style was used to highlight the text react and dummy"},context:{HDesign:p,react:s||(s=e.t(a,2))},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}},"highlighttextarea-demo-demo2":{component:a.memo(a.lazy(function(){return e.e(3494).then(e.bind(e,52134))})),asset:{type:"BLOCK",id:"highlighttextarea-demo-demo2",refAtomIds:["HighlightTextarea"],dependencies:{"index.tsx":{type:"FILE",value:e(49733).Z},HDesign:{type:"NPM",value:"0.0.1"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx",title:"Senior",description:"In this case, different colors of highlight were applied to the text react and dumi, and advanced features such as custom events can also be customized for them"},context:{HDesign:p,react:s||(s=e.t(a,2))},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}}}},92961:function(l,t,e){var s;e.r(t),e.d(t,{demos:function(){return g}});var r=e(90228),d=e.n(r),h=e(87999),_=e.n(h),a=e(75271),v=e(544),p=e(63412),g={"masonry-demo-demo":{component:a.memo(a.lazy(function(){return e.e(278).then(e.bind(e,6237))})),asset:{type:"BLOCK",id:"masonry-demo-demo",refAtomIds:["Masonry"],dependencies:{"index.tsx":{type:"FILE",value:e(94944).Z},react:{type:"NPM",value:"18.3.1"},HDesign:{type:"NPM",value:"0.0.1"}},entry:"index.tsx",title:"Base",description:"In this masonry case, set the spacing to 16px, the minimum width of each card is 200px, and the number of cards that can be placed in each row is automatically calculated."},context:{react:s||(s=e.t(a,2)),HDesign:p},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}}}},15312:function(l,t,e){var s;e.r(t),e.d(t,{demos:function(){return g}});var r=e(90228),d=e.n(r),h=e(87999),_=e.n(h),a=e(75271),v=e(31874),p=e(63412),g={"scrollcontainer-demo-demo":{component:a.memo(a.lazy(function(){return e.e(6087).then(e.bind(e,89125))})),asset:{type:"BLOCK",id:"scrollcontainer-demo-demo",refAtomIds:["ScrollContainer"],dependencies:{"index.tsx":{type:"FILE",value:e(49358).Z},HDesign:{type:"NPM",value:"0.0.1"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx",title:"Base",description:"In this case, he was simply used"},context:{HDesign:p,react:s||(s=e.t(a,2))},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}},"scrollcontainer-demo-style":{component:a.memo(a.lazy(function(){return e.e(6087).then(e.bind(e,36649))})),asset:{type:"BLOCK",id:"scrollcontainer-demo-style",refAtomIds:["ScrollContainer"],dependencies:{"index.tsx":{type:"FILE",value:e(18758).Z},HDesign:{type:"NPM",value:"0.0.1"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx",title:"Style",description:"In this case, the style of the scrollbar was customized using the thumbOptions and hoverThumbOptions properties of the component"},context:{HDesign:p,react:s||(s=e.t(a,2))},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}}}},98935:function(l,t,e){var s;e.r(t),e.d(t,{demos:function(){return g}});var r=e(90228),d=e.n(r),h=e(87999),_=e.n(h),a=e(75271),v=e(2485),p=e(63412),g={"sidebar-demo-demo":{component:a.memo(a.lazy(function(){return e.e(234).then(e.bind(e,71162))})),asset:{type:"BLOCK",id:"sidebar-demo-demo",refAtomIds:["Sidebar"],dependencies:{"index.tsx":{type:"FILE",value:e(79512).Z},HDesign:{type:"NPM",value:"0.0.1"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx",title:"Base",description:"Default mounting to document.body"},context:{HDesign:p,react:s||(s=e.t(a,2))},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}},"sidebar-demo-demo2":{component:a.memo(a.lazy(function(){return e.e(234).then(e.bind(e,65795))})),asset:{type:"BLOCK",id:"sidebar-demo-demo2",refAtomIds:["Sidebar"],dependencies:{"index.tsx":{type:"FILE",value:e(63364).Z},HDesign:{type:"NPM",value:"0.0.1"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx",title:"Senior",description:`Allow modifications:
1\u3001The distance between each element internally\uFF08 gap \uFF09
2\u3001The offset of the entire component \uFF08 offset \uFF09
3\u3001The arrangement direction of the internal elements \uFF08 direction \uFF09`},context:{HDesign:p,react:s||(s=e.t(a,2))},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}}}},69741:function(l,t,e){var s;e.r(t),e.d(t,{demos:function(){return g}});var r=e(90228),d=e.n(r),h=e(87999),_=e.n(h),a=e(75271),v=e(31450),p=e(63412),g={"simpleimg-demo-demo":{component:a.memo(a.lazy(function(){return e.e(2271).then(e.bind(e,57636))})),asset:{type:"BLOCK",id:"simpleimg-demo-demo",refAtomIds:["SimpleImg"],dependencies:{"index.tsx":{type:"FILE",value:e(41112).Z},HDesign:{type:"NPM",value:"0.0.1"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx",title:"Base",description:"You can open F12 to view the src attribute of the image and check if the lazy loading function is effective"},context:{HDesign:p,react:s||(s=e.t(a,2))},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}}}},97469:function(l,t,e){var s;e.r(t),e.d(t,{demos:function(){return g}});var r=e(90228),d=e.n(r),h=e(87999),_=e.n(h),a=e(75271),v=e(6711),p=e(63412),g={"skeleton-demo-demo":{component:a.memo(a.lazy(function(){return e.e(9254).then(e.bind(e,32802))})),asset:{type:"BLOCK",id:"skeleton-demo-demo",refAtomIds:["Skeleton"],dependencies:{"index.tsx":{type:"FILE",value:e(72678).Z},HDesign:{type:"NPM",value:"0.0.1"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx",title:"Base"},context:{HDesign:p,react:s||(s=e.t(a,2))},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}}}},47821:function(l,t,e){var s;e.r(t),e.d(t,{demos:function(){return g}});var r=e(90228),d=e.n(r),h=e(87999),_=e.n(h),a=e(75271),v=e(14951),p=e(63412),g={"watermark-demo-demo":{component:a.memo(a.lazy(function(){return e.e(6177).then(e.bind(e,47008))})),asset:{type:"BLOCK",id:"watermark-demo-demo",refAtomIds:["Watermark"],dependencies:{"index.tsx":{type:"FILE",value:e(20761).Z},HDesign:{type:"NPM",value:"0.0.1"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx",title:"Base"},context:{HDesign:p,react:s||(s=e.t(a,2))},renderOpts:{compile:function(){var i=_()(d()().mark(function c(){var o,u=arguments;return d()().wrap(function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,e.e(6813).then(e.bind(e,6813));case 2:return n.abrupt("return",(o=n.sent).default.apply(o,u));case 3:case"end":return n.stop()}},c)}));function m(){return i.apply(this,arguments)}return m}()}}}},99145:function(l,t,e){e.r(t),e.d(t,{texts:function(){return r}});var s=e(94287);const r=[{value:"A container component that allows elements to maintain a constant ratio and be fully displayed on the page, similar to the CSS property object-fit: cover.",paraId:0,tocIndex:0}]},90832:function(l,t,e){e.r(t),e.d(t,{texts:function(){return r}});var s=e(5371);const r=[{value:"A container that can provide a selected state for elements",paraId:0,tocIndex:0}]},93616:function(l,t,e){e.r(t),e.d(t,{texts:function(){return r}});var s=e(2567);const r=[{value:"On the basis of textarea, the function of recognizing highlighted text has been added",paraId:0,tocIndex:0},{value:"Properties",paraId:1,tocIndex:4},{value:"Description",paraId:1,tocIndex:4},{value:"type",paraId:1,tocIndex:4},{value:"Default",paraId:1,tocIndex:4},{value:"className",paraId:1,tocIndex:4},{value:"class",paraId:1,tocIndex:4},{value:"string",paraId:1,tocIndex:4},{value:"''",paraId:1,tocIndex:4},{value:"style",paraId:1,tocIndex:4},{value:"style",paraId:1,tocIndex:4},{value:"CSSProperties",paraId:1,tocIndex:4},{value:"value",paraId:1,tocIndex:4},{value:"text",paraId:1,tocIndex:4},{value:"string``(v: string) => ReactNode",paraId:1,tocIndex:4},{value:"''",paraId:1,tocIndex:4},{value:"highlight",paraId:1,tocIndex:4},{value:"Highlight Text",paraId:1,tocIndex:4},{value:"string[]",paraId:1,tocIndex:4},{value:"[]",paraId:1,tocIndex:4},{value:"formatHighlight",paraId:1,tocIndex:4},{value:"Format Highlighted Text",paraId:1,tocIndex:4},{value:"(v: string) => ReactNode",paraId:1,tocIndex:4},{value:"ref",paraId:1,tocIndex:4},{value:"Methods for exposing components",paraId:1,tocIndex:4},{value:"HighlightTextareaRef",paraId:1,tocIndex:4}]},29706:function(l,t,e){e.r(t),e.d(t,{texts:function(){return r}});var s=e(544);const r=[{value:"Masonry component",paraId:0,tocIndex:0}]},67328:function(l,t,e){e.r(t),e.d(t,{texts:function(){return r}});var s=e(31874);const r=[{value:"A container that can highly customize scrollbar styles",paraId:0,tocIndex:0}]},24865:function(l,t,e){e.r(t),e.d(t,{texts:function(){return r}});var s=e(2485);const r=[{value:"This component can be quickly applied to various positions on the page and is generally used for bubble pop-up windows in the bottom right corner",paraId:0,tocIndex:0}]},381:function(l,t,e){e.r(t),e.d(t,{texts:function(){return r}});var s=e(31450);const r=[{value:"A simple image component that only provides its own image loading detection and automatic lazy loading features.",paraId:0,tocIndex:0}]},66328:function(l,t,e){e.r(t),e.d(t,{texts:function(){return r}});var s=e(6711);const r=[{value:"Skeleton component is a commonly used placeholder element in web and mobile applications, primarily used to provide visual feedback to users during data loading.",paraId:0,tocIndex:0}]},85079:function(l,t,e){e.r(t),e.d(t,{texts:function(){return r}});var s=e(14951);const r=[{value:"Watermark",paraId:0,tocIndex:0}]},44878:function(l,t){t.Z=`import { AutoRatioContainer } from 'HDesign';
import React from 'react';

const Demo = () => (
  <AutoRatioContainer
    className="bg-slate-400 resize"
    style={{ padding: 32 }}
    boxClassName="overflow-hidden"
    boxStyle={{ borderRadius: 12 }}
    ratio={16 / 9}
  >
    <img className="w-full h-full block" src="https://picsum.photos/500/200" />
  </AutoRatioContainer>
);

export default Demo;
`},34421:function(l,t){t.Z=`import { CheckContainer } from 'HDesign';
import React from 'react';

const Mode: React.FC = () => {
  const [checked, setChecked] = React.useState(false);
  const mode: any = ['hover', 'checked', 'always'];
  return (
    <div className="flex gap-12">
      {Array.from({ length: 3 }).map((_, idx) => (
        <div className="flex flex-col gap-2" key={idx}>
          <div className="text-center">{mode[idx]}</div>
          <CheckContainer
            checked={checked}
            mode={mode[idx]}
            onClick={setChecked}
          >
            <img
              className="w-40 h-40 rounded-md bg-gray-400"
              src="https://picsum.photos/400"
            />
          </CheckContainer>
        </div>
      ))}
    </div>
  );
};
export default Mode;
`},20165:function(l,t){t.Z=`import { CheckContainer } from 'HDesign';
import React from 'react';

const Type: React.FC = () => {
  const [checked, setChecked] = React.useState(false);
  const type: any = ['default', 'radio', 'checkbox'];
  return (
    <div className="flex gap-12">
      {Array.from({ length: 3 }).map((_, idx) => (
        <div className="flex flex-col gap-2" key={idx}>
          <div className="text-center">{type[idx]}</div>
          <CheckContainer
            checked={checked}
            type={type[idx]}
            mode="always"
            onClick={setChecked}
          >
            <img
              className="w-40 h-40 rounded-md bg-gray-400"
              src="https://picsum.photos/400"
            />
          </CheckContainer>
        </div>
      ))}
    </div>
  );
};
export default Type;
`},49733:function(l,t){t.Z=`import { HighlightTextarea } from 'HDesign';
import React from 'react';

const Index: React.FC = () => {
  return (
    <HighlightTextarea
      className="border w-56 h-40"
      value="hello react, hello dumi"
      highlight={['react', 'dumi']}
      formatHighlight={(text) => {
        if (text === 'react') {
          return (
            <span
              className="text-red-500 cursor-pointer"
              onClick={() => alert('\u70B9\u51FB\u4E86react')}
            >
              {text}
            </span>
          );
        }
        return (
          <span
            className="text-blue-500 cursor-pointer"
            onClick={() => alert('\u70B9\u51FB\u4E86 dumi')}
          >
            {text}
          </span>
        );
      }}
    />
  );
};
export default Index;
`},20475:function(l,t){t.Z=`import { HighlightTextarea } from 'HDesign';
import React from 'react';

const Index: React.FC = () => {
  return (
    <HighlightTextarea
      className="border w-56 h-40"
      value="hello react, hello dumi"
      highlight={['react', 'dumi']}
    />
  );
};
export default Index;
`},94944:function(l,t){t.Z=`import React from 'react'
import { Masonry, SimpleImg } from 'HDesign';

/** \u6A21\u62DF\u56FE\u7247\u6570\u636E */
export const getData = (length: number) => {
  const resData = Array.from({ length }).map((_i, index) => {
    // \u751F\u6210\u4E00\u4E2A0\u52301\u4E4B\u95F4\u7684\u968F\u673A\u6570
    const width = Math.floor(Math.random() * 300 + 300)
    const height = Math.floor(Math.random() * 300 + 300)
    return {
      id: length + index,
      url: \`https://picsum.photos/\${width}/\${height}\`,
      ratio: width / height,
    };
  });
  return resData;
};

const index = ({ }) => {
  return (
    <Masonry
      className='w-full'
      options={{
        gap: 16,
        itemMinWidth: 160,
      }}
    >
      {getData(40).map(item => (
        <SimpleImg
          wrapStyle={{
            width: '100%',
            aspectRatio: \`\${item.ratio}\`,
          }}
          src={item.url}
          key={item.id}
        />
      ))}
    </Masonry>
  )
}
export default index`},49358:function(l,t){t.Z=`import { ScrollContainer } from 'HDesign';
import React from 'react';

const Index: React.FC = () => {
  return (
    <ScrollContainer style={{ width: 400, height: 400 }}>
      <div
        style={{
          width: 1000,
          height: 1000,
          background: 'linear-gradient(to top right, #f1f2b5, #135058)',
        }}
      ></div>
    </ScrollContainer>
  );
};
export default Index;
`},18758:function(l,t){t.Z=`import { ScrollContainer } from 'HDesign';
import React from 'react';

const Index: React.FC = () => {
  return (
    <ScrollContainer
      style={{ width: 400, height: 400 }}
      thumbOptions={{
        gap: 2,
        size: 10,
        background: 'green',
      }}
      hoverThumbOptions={{
        size: 12,
        gap: 1,
        background: 'orange',
      }}
    >
      <div
        style={{
          width: 1000,
          height: 1000,
          background: 'linear-gradient(to top right, #f1f2b5, #135058)',
        }}
      ></div>
    </ScrollContainer>
  );
};
export default Index;
`},63364:function(l,t){t.Z=`import { Sidebar } from 'HDesign';
import React, { useRef } from 'react';

const Demo2: React.FC = () => {
  const boxRef = useRef<HTMLDivElement>(null);
  return (
    <>
      <div
        className="relative border w-full border-cyan-600 z-0"
        style={{ height: 500 }}
        ref={boxRef}
      ></div>

      <Sidebar
        placement="right"
        alignment="end"
        itemOptions={{ gap: 16 }}
        offset={{ right: 18, bottom: 18 }}
        target={boxRef}
      >
        <div className="w-12 h-12 bg-slate-200 rounded-full flex items-center justify-center">
          \u5DE5\u51771
        </div>
        <div className="w-12 h-12 bg-slate-200 rounded-full flex items-center justify-center">
          \u5DE5\u51772
        </div>
        <div className="w-12 h-12 bg-slate-200 rounded-full flex items-center justify-center">
          \u5DE5\u51773
        </div>
      </Sidebar>

      <Sidebar
        placement="left"
        alignment="end"
        direction="horizontal"
        itemOptions={{ gap: 16 }}
        offset={{ left: 18, bottom: 18 }}
        target={boxRef}
      >
        <div className="w-12 h-12 bg-slate-200 rounded-full flex items-center justify-center">
          \u5DE5\u51771
        </div>
        <div className="w-12 h-12 bg-slate-200 rounded-full flex items-center justify-center">
          \u5DE5\u51772
        </div>
        <div className="w-12 h-12 bg-slate-200 rounded-full flex items-center justify-center">
          \u5DE5\u51773
        </div>
      </Sidebar>
    </>
  );
};
export default Demo2;
`},79512:function(l,t){t.Z=`import { Sidebar } from 'HDesign';
import React, { useRef } from 'react';

const Index: React.FC = () => {
  const boxRef = useRef<HTMLDivElement>(null);
  return (
    <>
      <div
        className="relative border w-full border-cyan-600 z-0"
        style={{ height: 500 }}
        ref={boxRef}
      ></div>

      <Sidebar placement="left" alignment="start" target={boxRef}>
        <div className="w-12 h-12 rounded bg-slate-200 flex items-center justify-center">
          \u5DE6\u4E0A
        </div>
      </Sidebar>
      <Sidebar placement="left" alignment="center" target={boxRef}>
        <div className="w-12 h-12 rounded bg-slate-200 flex items-center justify-center">
          \u5DE6\u4E2D
        </div>
      </Sidebar>
      <Sidebar placement="left" alignment="end" target={boxRef}>
        <div className="w-12 h-12 rounded bg-slate-200 flex items-center justify-center">
          \u5DE6\u4E0B
        </div>
      </Sidebar>

      <Sidebar placement="right" alignment="start" target={boxRef}>
        <div className="w-12 h-12 rounded bg-slate-200 flex items-center justify-center">
          \u53F3\u4E0A
        </div>
      </Sidebar>
      <Sidebar placement="right" alignment="center" target={boxRef}>
        <div className="w-12 h-12 rounded bg-slate-200 flex items-center justify-center">
          \u53F3\u4E2D
        </div>
      </Sidebar>
      <Sidebar placement="right" alignment="end" target={boxRef}>
        <div className="w-12 h-12 rounded bg-slate-200 flex items-center justify-center">
          \u53F3\u4E0B
        </div>
      </Sidebar>
    </>
  );
};
export default Index;
`},41112:function(l,t){t.Z=`import { SimpleImg } from 'HDesign';
import React from 'react';

const Index: React.FC = (props) => {
  const {} = props;

  return (
    <div className="flex flex-col gap-8 items-center h-52 overflow-auto">
      {Array.from({ length: 20 }).map((_, idx) => (
        <SimpleImg
          className="w-40 h-40 rounded-xl shrink-0"
          src={\`https://picsum.photos/1000?random=\${idx}\`}
          key={idx}
        />
      ))}
    </div>
  );
};
export default Index;
`},72678:function(l,t){t.Z=`import { Skeleton } from 'HDesign';
import React from 'react';

const Index: React.FC = (props) => {
  const {} = props;

  return (
    <div className="flex gap-4 items-center">
      <Skeleton width={100} height={100} radius={999} />
      <div className="flex flex-col gap-2">
        <Skeleton width={200} height={24} radius={4} />
        <Skeleton width={160} height={24} radius={4} />
        <Skeleton width={240} height={24} radius={4} />
      </div>
    </div>
  );
};
export default Index;
`},20761:function(l,t){t.Z=`import { Watermark } from 'HDesign';
import React from 'react';

const Index: React.FC = () => {
  return (
    <Watermark content={['HzihHuang', '\u6C34\u5370']}>
      <div style={{ height: 300, width: '100%' }}></div>
    </Watermark>
  );
};
export default Index;
`}}]);