Layout scaffolding for Web apps.
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

README.md 776 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. # Viewfinder
  2. Layout scaffolding for Web apps.
  3. ## Usage
  4. Just import:
  5. ```tsx
  6. import * as React from 'react'
  7. import { Basic, LeftSidebar, LeftSidebarWithMenu, RightSidebarStatic } from '@tesseract-design/viewfinder'
  8. const Page: React.FC = ({
  9. avatar,
  10. fullName,
  11. }) => (
  12. <Basic.Layout
  13. brand={
  14. <a href="/">
  15. <img
  16. src="logo.svg"
  17. alt="ACME Inc."
  18. />
  19. </a>
  20. }
  21. topBarCenter={
  22. <form>
  23. <input
  24. type="search"
  25. name="q"
  26. />
  27. </form>
  28. }
  29. userLink={
  30. <a href="/profile">
  31. <img
  32. src={avatar}
  33. alt={fullName}
  34. />
  35. </a>
  36. }
  37. >
  38. <Basic.ContentContainer>
  39. Hello world!
  40. </Basic.ContentContainer>
  41. </Basic.Layout>
  42. )
  43. export default Page
  44. ```
  45. The available props per layout is included as a TypeScript declarations file.