en-US

Pagination is configured via dPagination.

zh-CN

通过 dPagination 配置分页。

import { useImmer } from '@react-devui/hooks';
import { DSlides, DRadio, DSwitch } from '@react-devui/ui';

export default function Demo() {
  const [pagination, setPagination] = useImmer({
    visible: true,
    dynamic: false,
  });

  return (
    <>
      <div className="container">
        <div className="label">visible</div>
        <DRadio.Group
          dList={[true, false, 'hover'].map((visible) => ({
            label: visible.toString(),
            value: visible,
          }))}
          dModel={pagination.visible}
          dType="outline"
          onModelChange={(visible) => {
            setPagination((draft) => {
              draft.visible = visible;
            });
          }}
        />
      </div>
      <br />
      <div className="container">
        <div className="label">dynamic</div>
        <DSwitch
          dModel={pagination.dynamic}
          onModelChange={(dynamic) => {
            setPagination((draft) => {
              draft.dynamic = dynamic;
            });
          }}
        />
      </div>
      <br />
      <DSlides
        dList={Array.from({ length: 8 }).map((_, index) => ({
          id: index,
          content: (
            <div className="app-demo-slide" style={{ background: index % 2 ? 'rgb(54 77 121)' : 'rgb(94 113 148)', height: 160 }}>
              Slide {index}
            </div>
          ),
        }))}
        dPagination={pagination}
      ></DSlides>
    </>
  );
}

.container {
  display: flex;

  .label {
    flex: 0 0 5em;
    line-height: 36px;
  }
}