mosaic v1.1.0
Mosaic
Codify UI behaviour with declarative configuration
š§ Please kindly note that this project is a work in progress š§
Mosaic's declarative configuration enables common UI behaviours to be reused effectively between different projects, ensuring a high level of performance and accessibility, whilst allowing developers to concentrate on the things that are particular to their specific business and project requirements: the markup and styles.
Example
The following configuration implements the Accordion pattern:
let counter = 0
export const Accordion = () => {
const id = counter++
return {
state: {
openPanel: 0,
},
action: {
togglePanel: (state, { index }) => ({
...state,
openPanel: state.openPanel === index ? -1 : index,
}),
},
elements: [
{
select: "button[accordion-toggle]",
attribute: (state, i) => ({
id: `trigger_${id}_${i}`,
ariaControls: `panel_${id}_${i}`,
ariaExpanded: state.openPanel === i,
}),
on: {
click: "togglePanel",
},
},
{
select: "[accordion-panel]",
attribute: (state, i) => ({
id: `panel_${id}_${i}`,
ariaLabelledby: `trigger_${id}_${i}`,
hidden: state.openPanel !== i,
}),
},
],
}
}
Install
cdn
import { define } from "https://unpkg.com/mosaic"
npm
> npm i mosaic
Usage
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago