https://github.com/typescene/typescene-web-nav
Typescene web app navigation components
https://github.com/typescene/typescene-web-nav
Last synced: about 1 year ago
JSON representation
Typescene web app navigation components
- Host: GitHub
- URL: https://github.com/typescene/typescene-web-nav
- Owner: typescene
- License: mit
- Created: 2019-01-16T04:42:01.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-12T20:57:14.000Z (almost 5 years ago)
- Last Synced: 2025-04-14T08:18:13.754Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 148 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Typescene web app navigation components
This package contains the following components:
- `AppLayout` and friends:
- `AppDrawer`
- `AppHeader`
- `AppMenuButton`
- `AppTitle`
- `AppToolbar`
- `TabBar`, and
- `TabBarButton`
> **Note:** The names above are for the JSX tags. If your code does not use JSX (i.e. `.tsx` files), then the same names will still work, but you can also import the corresponding `...View` components instead.
## Installation
**Note:** This component requires [Typescene](https://github.com/typescene/typescene) along with `@typescene/webapp`.
Install the NPM package first:
`npm i -D @typescene/web-nav`
Then import any of the classes using an import statement such as:
`import { AppLayoutView } from "@typescene/web-nav"`
## Example
The following example demonstrates how the `AppLayout` component can be used with JSX-style code:
```jsx
const myAppView = (
{/* Drawer, automatically shown using AppMenuButton */}
{/* drawer header */}
{/* scrollable area */}
{/* Fixed header bar */}
Title
{/* buttons... */}
{/* Remaining content... */}
Hello, world!
);
```
Tabs can be used as follows (note that the tab 'content' is not part of the tab bar component, so you can use e.g. a state property on the Activity class to toggle between content views directly below the tab bar):
```jsx
(
First tab
Second tab
{/* ... put tab content here ... */}
)
```
## Demo
The `demo/` folder contains more examples that show how to use these components.
To run the demo, clone the source repository and run the following commands in the terminal:
```bash
npm install
npm run build
cd demo
npm install
npm start
```