https://github.com/marcodpt/views
Hyperapp views with bootstrap5 and fontawesome5
https://github.com/marcodpt/views
bootstrap bootstrap5 font-awesome fontawesome5 hyperapp ui views
Last synced: 12 months ago
JSON representation
Hyperapp views with bootstrap5 and fontawesome5
- Host: GitHub
- URL: https://github.com/marcodpt/views
- Owner: marcodpt
- License: mit
- Created: 2021-06-14T12:20:32.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-04T19:51:36.000Z (almost 4 years ago)
- Last Synced: 2025-01-13T15:27:03.430Z (about 1 year ago)
- Topics: bootstrap, bootstrap5, font-awesome, fontawesome5, hyperapp, ui, views
- Language: JavaScript
- Homepage:
- Size: 102 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# views
> [Hyperapp](https://github.com/jorgebucaran/hyperapp) views with
[bootstrap5](https://getbootstrap.com/) and
[fontawesome5](https://fontawesome.com/)
[Tests](https://marcodpt.github.io/component/tests.html?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2Fmarcodpt%2Fviews%2Ftests.js)
This is my hyperapp views that I use in production. Have fun :)
## Usage
```js
import {
fas,
spinner,
data,
link,
field
} from 'https://cdn.jsdelivr.net/gh/marcodpt/views/index.js'
fas({
name: 'icons'
})
//
fas({
name: '@amazon',
spin: true,
size: '2x'
})
//
spinner({})
//
spinner({
size: '5x'
})
//
link({
title: 'Insert',
icon: 'pencil-alt'
})
// Insert
link({
title: 'Insert',
icon: 'pencil-alt',
href: '#post'
})
// Insert
link({
title: 'Insert',
type: 'success',
icon: 'pencil-alt',
href: '#post'
})
//
// Insert
//
data({
data: "Hello world!"
})
//Hello world!
data({
data: "Hello world!",
type: "info"
})
//
// Hello world!
//
data({
data: "Hello world!",
href: "#hello",
title: "msg"
})
//Hello world!
data({
data: "my data",
href: "#hello",
title: "Get your data!",
mime: 'text/csv',
name: "download.csv"
})
//Get your data!
data({
title: "Girl in a jacket",
mime: 'image/jpeg',
src: "https://www.w3schools.com/tags/img_girl.jpg"
})
// 
field({}),
//
field({
name: "test",
type: "date",
value: "2021-07-15",
change: showVal,
disabled: true,
error: 'y'
})
//
field({
name: "test",
type: "textarea",
placeholder: "",
value: "Hello,\nmy name is Mario!",
rows: 4,
change: showVal,
error: ''
})
//
field({
name: "test",
options: null
})
//
// \u231B
//
field({
name: "test",
options: ['car', 'bike', 'plane']
})
//
//
//
//
// \u2304
//
field({
name: "test",
options: [
{value: 1, label: 'car'},
{value: 2, label: 'bike'},
{value: 3, label: 'plane'},
{value: 4, label: 'skate'}
],
value: 3
})
//
//
//
//
//
//
```
## Contributing
Yes please! It is a very simple project, no guidelines, any
contribution is greatly appreciated!