catamphetamine / frontend-lib

Frontend utilities and components

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

frontend-lib

Frontend utilities and components.

Install

Clone the repository:

git clone https://gitlab.com/catamphetamine/frontend-lib.git

And then simply import modules from it:

import Button from '../../frontend-lib/components/Button.js'

The reason for using these components as source code instead of importing them from an npm package is because a developer might prefer to modify them.

Use

  • <Button/> — renders a generic button.

  • <PressedStateButton/> — renders a "pressed state" button: a button that stays "pressed" until "depressed".

  • <Clickable/> — makes any element behave as if it was a button (but not in an ARIA-compliant way): the element will start responding to click and touch events, and will call onClick() when clicked or tapped.

  • <OnLongPress/> — adds an onLongPress() property to an arbitrary element, which is triggered "on long press" (supports touch and mouse devices).

  • <Snackbar/> — shows slide-in/slide-out notifications.

  • <OkCancelDialog/> — shows an "Ok"/"Cancel" dialog.

  • <TextSelectionTooltip/> — shows a tooltip with arbitrary content (for example, buttons) on text selection.

  • <LinearProgress/> — renders a linear progress bar (progress indicator).

  • <PopIconButton/> — renders an on/off button that plays a "pop" animation when it's switched "on".

  • <ContentSection/> — a generic section of content. Can be used to organize page content into sections.

  • <Announcement/> — renders a closeable "announcement" element.

  • <Menu/> — renders a list of menu items.

  • <Form/> — renders a <form/> with fields and buttons.

  • <DeviceInfo/> — returns the information about the user's device: what's the width of the screen and whether it's a touch device.

  • <ExternalLink/> — just a wrapper for a <a href="..."/> link. Only exists to accept a to property instead of a href property.

  • Padding.css — Provides a utility CSS .Padding class.

GitHub Ban

On March 9th, 2020, GitHub, Inc. silently banned my account (erasing all my repos, issues and comments) without any notice or explanation. Because of that, all source codes had to be promptly moved to GitLab. The GitHub repo is now only used as a backup (you can star the repo there too), and the primary repo is now the GitLab one. Issues can be reported in any repo.

License

MIT

About

Frontend utilities and components

License:MIT License


Languages

Language:JavaScript 70.7%Language:CSS 29.3%