> DocumentViewer

DocumentViewer

Viewer de documents (PDF, Image)

TagsuiInformationsWeb onlyExemples4StylesDisponibles

DocumentImageEx

Document image

1 / 1

export const DocumentImageEx = () => (
  <Box maxW={500} height={500}>
    <DocumentViewer title="Document image" type="image" source="https://picsum.photos/1000/2000" height="100%" />
  </Box>
);

DocumentPdf

Document PDF

1 / 1

export const DocumentPdf = () => (
  <Box height={400} maxW={500}>
    <DocumentViewer
      title="Document PDF"
      type="pdf"
      source="https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf"
      height="100%"
    />
  </Box>
);

DocumentPdfError

Document PDF en erreur

1 / 1

export const DocumentPdfError = () => (
  <Box height={400} maxW={500}>
    <DocumentViewer
      title="Document PDF en erreur"
      type="pdf"
      source="https://example.com/document-inexistant.pdf"
      height="100%"
    />
  </Box>
);

WithChildren

Document PDF

1 / 1

Contenu enfant

export const WithChildren = () => (
  <Box height={600}>
    <DocumentViewer
      title="Document PDF"
      type="pdf"
      source="https://upload.wikimedia.org/wikipedia/commons/4/4e/Wikip%C3%A9dia.pdf"
      height="100%"
    >
      <Box p={'2W'} minW={600}>
        <Typography>Contenu enfant</Typography>
      </Box>
    </DocumentViewer>
  </Box>
);

Alveole UI Kit — v1.8.4