https://github.com/qualityunit/component-flexsplitlayout
Tiny Web component for resize-able split layouts using Flexbox.
https://github.com/qualityunit/component-flexsplitlayout
Last synced: about 1 year ago
JSON representation
Tiny Web component for resize-able split layouts using Flexbox.
- Host: GitHub
- URL: https://github.com/qualityunit/component-flexsplitlayout
- Owner: QualityUnit
- License: mit
- Created: 2022-06-14T07:51:48.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-11-29T14:18:21.000Z (over 2 years ago)
- Last Synced: 2025-04-01T23:09:15.162Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://qualityunit.github.io/Component-FlexSplitLayout/
- Size: 689 KB
- Stars: 3
- Watchers: 10
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Split Layout using Flex
This component can be used to create resizable using CSS Flexbox.
## Getting Started
To start building a new web component using Stencil, clone this repo to a new directory:
```bash
npm install
npm start
```
To build the component for production, run:
```bash
npm run build
```
To run the unit tests for the components, run:
```bash
npm test
```
Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
## Using this component
There are three strategies we recommend for using web components built with Stencil.
The first step for all three of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
### Script tag
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### Node Modules
- Run `npm install my-component --save`
- Put a script tag similar to this `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc
### In a stencil-starter app
- Run `npm install my-component --save`
- Add an import to the npm packages `import my-component;`
- Then you can use the element anywhere in your template, JSX, html etc