@digital-butlers/components

0.4.4 • Public • Published

Digitalbutlers-components

Examples of components

You can view examples of components here

Documentation

Documentation for Tabs

Documentation for Accordions

Documentation for Marquee

Documentation for SharePageLinks

Usage

Install library

npm install @digital-butlers/components

or

pnpm add @digital-butlers/components

Import a class and create an instance of TABS


import { Tabs } from '@digital-butlers/components/tabs';

const SELECTORS = {
	TABS_WRAPPER: '[data-role="tabs-wrapper"]',
	PANEL_LIST: '[data-role="panel-list"]',
	TAB_LIST: '[data-role="tab-list"]',
};

	const tabsVertical = new Tabs(SELECTORS.COMPONENT, {
	tabpanelsListSelector: SELECTORS.PANEL_LIST,
	tabbuttonsListSelector: SELECTORS.TAB_LIST,
	orientation: 'vertical',
	deletableTabs: true,
	animation: {
		delay: 1000,
	},
	triggerEvent: 'mouseover',
	matchMediaRule: '(min-width: 600px)',
	autoplay: {
		delay: 0,
	},
	on: {
		tabChange: (tabs) => {
			console.log(tabs.activeIndex);
		},
	},
});

You can see more class parameters in the documentation

Import a class and create an instance of ACCORDIONS:


import { Accordions } from '@digital-butlers/components/accordions';

const componentElement = document.querySelector('[data-component-id="accordions"]'); //

const accordions = new Accordions({
	parentElement: componentElement, // Any node that is the parent of an accordion. It is advisable to specify the nearest parent
	isSingle: true, // If set to 'true', then only one active accordion element can be turned on at a time
});

You can see more class parameters in the documentation


Import a class and create an instance of MARQUEE:


import { Marquee } from '@digital-butlers/components/marquee';

const marquee = new Marquee({
	marqueeParent: document.querySelector('[data-component-id="marquee"]'),
	marqueeMovingLineSelector: '[data-role="marquee-moving-line"]',
	marqueeListSelector: '[data-role="marquee-list"]',
	wrapperOfVisiblePartOfMarquee: document.documentElement, // it is needed to measure the width of the visible part of the running line
	matchMediaRule: window.matchMedia('(min-width: 800px)'), // will prevent the tab changing if window.matchMedia doesn't match
});

marquee.init();

You can see more class parameters in the documentation


Import a class and create an instance of SHARE_PAGE_LINKS:


import { SharePageLinks } from '@digital-butlers/components/share-page-links';

const shareLinks = new SharePageLinks({
	messageForShareViaEmail: "This is really important! Don't miss it", // the text to insert in the "body of the message" field (if we share a link to the page in the email)
	pageName: 'Custom page name', // if there is no 'title', 'h1', '[role="heading"][aria-level="1"]' on the page, this text will be used instead
});

shareLinks.init();

You can see more class parameters in the documentation


Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.4.4
    45
    • latest

Version History

Package Sidebar

Install

npm i @digital-butlers/components

Weekly Downloads

662

Version

0.4.4

License

MIT

Unpacked Size

166 kB

Total Files

69

Last publish

Collaborators

  • mark0182
  • digital_butlers
  • evgeni_ivanchikov