https://github.com/rafgraph/four-corner-layout
Design concept for four presentation pages on a single web page
https://github.com/rafgraph/four-corner-layout
Last synced: 5 months ago
JSON representation
Design concept for four presentation pages on a single web page
- Host: GitHub
- URL: https://github.com/rafgraph/four-corner-layout
- Owner: rafgraph
- License: mit
- Created: 2016-04-23T04:43:22.000Z (about 10 years ago)
- Default Branch: gh-pages
- Last Pushed: 2021-01-15T16:12:15.000Z (over 5 years ago)
- Last Synced: 2025-01-21T06:09:23.572Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://four-corner-layout.rafgraph.dev
- Size: 710 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Four Corner Layout Concept
Four presentation pages on a single web page. Each presentation page is immersive and dynamically resizes to fit the viewable area.
[Live Concept](https://four-corner-layout.rafgraph.dev)
## Code Notes
#### Corner Component
- [Corner.jsx](https://github.com/rafgraph/four-corner-layout/blob/gh-pages/components/Corner.jsx)
- A single corner component that is a pure function of its props (stateless functional react component)
- Based on the props it receives it renders itself as either the top-left, top-right, bottom-left or bottom-right corner in expanded or non-expanded state
#### SVG Arrows
- [SvgArrows.jsx](https://github.com/rafgraph/four-corner-layout/blob/gh-pages/components/SvgArrows.jsx)
- Each svg arrow is wrapped in a stateless react component, which can optionally receive the following props (all have defaults that can be overwritten except for `className`, which is merged with the default value):
- `width`
- svg width attribute (not style attribute)
- type: string, can be unit-less, e.g. `'20'`, `'20px'`, `'20vw'`, etc
- `height`
- svg height attribute (not style attribute)
- type: string, can be unit-less, e.g. `'20'`, `'20px'`, `'20vw'`, etc
- `scale`
- multiplier to default (or supplied) unit-less width and height
- type: number (width and height must be unit-less to use scale), e.g. `1.5`
- `title`
- svg title attribute, also used for the default `aria-label`
- type: string, e.g. `'Go Left'`
- `className`
- classes to merge with default classes
- default classes: `'arrow [direction]-arrow'` (defaults can't be overwritten)
- type: string, e.g. `'go-left another-class'`
- `style`
- svg style attribute
- type: react style object, e.g. `{ display: 'block', margin: 'auto' }`
- note that the fill property is defined in css so it can be changed with css `:hover`/`:active` selectors
- note that there is no default style object so it is added as part of `...other`
- ... and every other prop you pass in, including `viewBox`
```javascript
import react, { PropTypes } from 'react';
const propTypes = {
width: PropTypes.string,
height: PropTypes.string,
scale: PropTypes.number,
title: PropTypes.string,
className: PropTypes.string,
};
const defaultPropsHorizontalArrow = {
width: '21',
height: '7',
scale: 1,
};
// note that default title is declared as a default attribute
// of the function (instead of as a default prop) because each arrow
// has it's own title but share default props
function LeftArrow({ width, height, scale, className, title = 'Left Arrow', ...other }) {
return (
{title}
);
}
LeftArrow.propTypes = propTypes;
LeftArrow.defaultProps = defaultPropsHorizontalArrow;
export { LeftArrow };
```