https://github.com/indigomultimediateam/c-box-line

Webová komponenta `<c-box-line>` reprezentující textový „box” a „šipku” propojených linkou
https://github.com/indigomultimediateam/c-box-line

web-component webcomponent webcomponents

Last synced: about 1 month ago
JSON representation

Webová komponenta `<c-box-line>` reprezentující textový „box” a „šipku” propojených linkou

• Host: GitHub
• URL: https://github.com/indigomultimediateam/c-box-line
• Owner: IndigoMultimediaTeam
• License: mit
• Created: 2021-01-30T18:15:03.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-08-06T15:26:06.000Z (almost 2 years ago)
• Last Synced: 2025-09-23T04:36:23.666Z (9 months ago)
• Topics: web-component, webcomponent, webcomponents
• Language: JavaScript
• Homepage:
• Size: 102 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[![LTS+sub-branches](https://img.shields.io/badge/submodule-LTS+sub--branches-informational?style=flat-square&logo=git)](https://github.com/IndigoMultimediaTeam/lts-driven-git-submodules)

# CBoxLine

Web component `` represents a text “box” and “arrow” connected a line, see

[example](https://indigomultimediateam.github.io/c-box-line/examples.html).

## Options

- **ESM Component can be found in [./CBoxLine.js](./CBoxLine.js)**

- UMD alternative see [./lib/CBoxLine.umd.js](./lib/CBoxLine.umd.js)

- [CEI](https://github.com/IndigoMultimediaTeam/customElementsInitiator?tab=readme-ov-file#v0) alternative see [./lib/CBoxLine.cei.js](./lib/CBoxLine.cei.js)

## Usage

Web Component `<*>*>`:

- The “image caption” component, i.e. the line from `<*>` to the pointer (circle)

- The component is expanded to 100% and placed in the top left

- box and wheel (and line) are positioned percentage-wise within the component using the `position-*` attributes

- partially treated if, the box and wheel are in the horizontal/vertical plane

- by default the box is moved to `0 0` and the wheel to `100 100` (see `attributes`)

- all configuration options see `getComponentConfig` (and type `config` and `attributes`)

## Development

- see [./bs](./bs)