Layout scaffolding for Web apps.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

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.