Layout scaffolding for Web apps.
No puede seleccionar más de 25 temas Los temas deben comenzar con una letra o número, pueden incluir guiones ('-') y pueden tener hasta 35 caracteres de largo.
 
 
 
TheoryOfNekomata 9a27dfaa71 Update README hace 3 años
example Add area customization hace 3 años
src Add area customization hace 3 años
.editorconfig Initial commit hace 3 años
.gitignore Add examples hace 3 años
.npmignore Republish package, fix left sidebar layout hace 3 años
LICENSE Initial commit hace 3 años
README.md Update README hace 3 años
package.json Add area customization hace 3 años
tsconfig.json Make styles dynamic hace 3 años
yarn.lock Initial commit hace 3 años

README.md

Viewfinder

Layout scaffolding for Web apps.

This library is made to avoid custom repetitive layout code.

Usage

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.

Configuration

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.