ar

aframe-rounded

An A-Frame component to create rectangles with smooth edges.

Showing:

Popularity

Downloads/wk

270

GitHub Stars

27

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

0.9KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

A-Frame Rounded Primitive/Component

Rounded Primitive/Component for A-Frame to get a rectangle with rounded edges. This is great if you need to get smooth edges in your VR UIs.

Note: If you need more control you can check https://github.com/fernandojsg/aframe-slice9-component but the corners will be pixelated (that is why I wanted to use another method to create smooth edges).

Demo

Alt text

Live demo

Getting Started

<a-rounded position="0 1.2 -5" width="4" height="3.1" radius="0.05"></a-rounded>

Attributes

NameDescriptionTypeDefault
widthWidth of the containernumber1
heightHeight of the containernumber1
radiusBorder radius of the containernumber0.3
top-left-radiusBorder radius of the containernumber-1 (inherit)
top-right-radiusBorder radius of the containernumber-1 (inherit)
bottom-left-radiusBorder radius of the containernumber-1 (inherit)
bottom-right-radiusBorder radius of the containernumber-1 (inherit)
colorColor of the container.color"#F0F0F0"
opacityOpacity of the containeropacity1

Want to make some changes to it?

Installation

First make sure you have Node installed.

On Mac OS X, it's recommended to use Homebrew to install Node + npm:

brew install node

To install the Node dependencies:

npm install

Local Development

To serve the site from a simple Node development server:

npm start

Then launch the site from your favourite browser:

http://localhost:3000/

If you wish to serve the site from a different port:

PORT=8000 npm start

License

Distributed under an MIT License.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100