TheoryOfNekomata 9a27dfaa71 | 3 years ago | |
---|---|---|
example | 3 years ago | |
src | 3 years ago | |
.editorconfig | 3 years ago | |
.gitignore | 3 years ago | |
.npmignore | 3 years ago | |
LICENSE | 3 years ago | |
README.md | 3 years ago | |
package.json | 3 years ago | |
tsconfig.json | 3 years ago | |
yarn.lock | 3 years ago |
Layout scaffolding for Web apps.
This library is made to avoid custom repetitive layout code.
Just import:
import * as React from 'react'
import { Basic, LeftSidebar, LeftSidebarWithMenu, RightSidebarStatic } from '@tesseract-design/viewfinder'
const Page: React.FC = ({
avatar,
fullName,
}) => (
<Basic.Layout
brand={
<a href="/">
<img
src="logo.svg"
alt="ACME Inc."
/>
</a>
}
topBarCenter={
<form>
<input
type="search"
name="q"
/>
</form>
}
userLink={
<a href="/profile">
<img
src={avatar}
alt={fullName}
/>
</a>
}
>
<Basic.ContentContainer>
Hello world!
</Basic.ContentContainer>
</Basic.Layout>
)
export default Page
Other examples can be found in the example
directory in the repository. Please check them out for hints
on styling and using the different available layouts.
The available props per layout are included as a TypeScript declarations file.
There are CSS variables that can be declared in the parent of the *.Layout
components
(preferably :root
) for customizing the metrics of the layout:
--height-topbar
Default value: 4rem
Height of the top bar widget.
--size-menu
Default value: 4rem
Width or height of the menu, depending on the orientation it is rendered.