https://github.com/edgeworkscreative/ewc-social
EWC Social Component
https://github.com/edgeworkscreative/ewc-social
social-buttons stenciljs-components
Last synced: 8 months ago
JSON representation
EWC Social Component
- Host: GitHub
- URL: https://github.com/edgeworkscreative/ewc-social
- Owner: edgeworkscreative
- License: mit
- Created: 2018-09-13T19:45:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-09-28T15:38:24.000Z (over 7 years ago)
- Last Synced: 2025-09-15T06:53:38.621Z (9 months ago)
- Topics: social-buttons, stenciljs-components
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@edgeworkscreative/ewc-social
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Edgeworks Creative Social Component
A lightweight social icons component built with StencilJS.
#### Stencil components are just Web Components, so they work in any major framework or with no framework at all.
## Example
```html
```
## Documentation
### Properties
all url properties require a full url eg. `https://edgeworkscreative.com/`
| Property | Attribute | Description | Type |
| ------------ | ------------ | ----------- | -------- |
| `facebook` | `facebook` | `facebook page url` | `string` |
| `googlePlus` | `google-plus` | `google plus page url` | `string` |
| `instagram` | `instagram` | `instagram page url` | `string` |
| `linkedin` | `linkedin` | `linkedin page url` | `string` |
| `pinterest` | `pinterest` | `pinterest page url` | `string` |
| `snapchat` | `snapchat` | `snapchat page url` | `string` |
| `twitter` | `twitter` | `twitter page url` | `string` |
| `vimeo` | `vimeo` | `vimeo page url` | `string` |
| `youtube` | `youtube` | `youtube page url` | `string` |
| `labels` | `labels` | `enable or disable labels` | `boolean` |
----------------------------------------------
### CSS Variables
Can be targeted via css using the tag for the component. eg. `ewc-social{--color:white;}`
| Variable | Description |
| ------------ | ----------- |
| `--color` | `icon and text color` |
| `--font-size` | `list item font size` |
| `--justify` | `flex box content justification` |
----------------------------------------------
## Using this component
### 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 @edgeworkscreative/ewc-social --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 @edgeworkscreative/ewc-social --save`
- Add an import to the npm packages `import '@edgeworkscreative/ewc-social';`
- Then you can use the element anywhere in your template, JSX, html etc
## Stencil
Stencil is a compiler for building fast web apps using Web Components.
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.