ozone-mosaic
is an element that display ozone items in a mosaic view.
<ozone-mosaic item-data={{item}}> </ozone-mosaic>methods
- searchInItems(searchString?:string) trigger quickSearch in the collection
- requestSearch() start a new search base on attribute -searchString-.
- customSearchQuery(requestQuery: SearchRequest) perform a custom search.
- search(searchRequest: SearchQuery) start search query
- saveSelectedItem(updatedData?:Item):Promise Save given item.
- clear() empty collection
Events
results-found Fired when results are found by the API.
Mixin
| Custom property | Description | Default |
|---|---|---|
--ozone-mosaic-item |
css mixin for the list of item | { box-sizing: border-box;width:300px;height:200px;margin:10px;display:flex;overflow: hidden;} |
--ozone-mosaic-item-margins |
css mixin for the margin of previewContainer | default 8px |
install
$ npm install --save ozone-mosaic
command
npm install: install project dependency.
npm run tsc: run typeScript compiler.
npm run build build application.
npm run test bundle test files with webpack and run test with webComponent tester.
npm run build:watch bundle test files with webpack and watch on changes.
npm run test:persist bundle test files with webpack and watch on changes.
npm run demo start demo app.