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 1.3 KiB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. # Viewfinder
  2. Layout scaffolding for Web apps.
  3. This library is made to avoid custom repetitive layout code.
  4. ## Usage
  5. Just import:
  6. ```tsx
  7. import * as React from 'react'
  8. import { Basic, LeftSidebar, LeftSidebarWithMenu, RightSidebarStatic } from '@tesseract-design/viewfinder'
  9. const Page: React.FC = ({
  10. avatar,
  11. fullName,
  12. }) => (
  13. <Basic.Layout
  14. brand={
  15. <a href="/">
  16. <img
  17. src="logo.svg"
  18. alt="ACME Inc."
  19. />
  20. </a>
  21. }
  22. topBarCenter={
  23. <form>
  24. <input
  25. type="search"
  26. name="q"
  27. />
  28. </form>
  29. }
  30. userLink={
  31. <a href="/profile">
  32. <img
  33. src={avatar}
  34. alt={fullName}
  35. />
  36. </a>
  37. }
  38. >
  39. <Basic.ContentContainer>
  40. Hello world!
  41. </Basic.ContentContainer>
  42. </Basic.Layout>
  43. )
  44. export default Page
  45. ```
  46. Other examples can be found in the `example` directory in the repository. Please check them out for hints
  47. on styling and using the different available layouts.
  48. The available props per layout are included as a TypeScript declarations file.
  49. ## Configuration
  50. There are CSS variables that can be declared in the parent of the `*.Layout` components
  51. (preferably `:root`) for customizing the metrics of the layout:
  52. ### `--height-topbar`
  53. Default value: `4rem`
  54. Height of the top bar widget.
  55. ### `--size-menu`
  56. Default value: `4rem`
  57. Width or height of the menu, depending on the orientation it is rendered.