Layout scaffolding for Web apps.
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 
TheoryOfNekomata 9a27dfaa71 Update README 3 yıl önce
example Add area customization 3 yıl önce
src Add area customization 3 yıl önce
.editorconfig Initial commit 3 yıl önce
.gitignore Add examples 3 yıl önce
.npmignore Republish package, fix left sidebar layout 3 yıl önce
LICENSE Initial commit 3 yıl önce
README.md Update README 3 yıl önce
package.json Add area customization 3 yıl önce
tsconfig.json Make styles dynamic 3 yıl önce
yarn.lock Initial commit 3 yıl önce

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.