Layout scaffolding for Web apps.
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
TheoryOfNekomata f5d2a31a67 Keep content on top 3年前
example Add area customization 3年前
src Keep content on top 3年前
.editorconfig Initial commit 3年前
.gitignore Add examples 3年前
.npmignore Republish package, fix left sidebar layout 3年前
LICENSE Initial commit 3年前
README.md Update README 3年前
package.json Keep content on top 3年前
tsconfig.json Make styles dynamic 3年前
yarn.lock Initial commit 3年前

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.