https://github.com/menduz/mzcore-uikit
Simple components for mzcore
https://github.com/menduz/mzcore-uikit
Last synced: 2 months ago
JSON representation
Simple components for mzcore
- Host: GitHub
- URL: https://github.com/menduz/mzcore-uikit
- Owner: menduz
- License: mit
- Created: 2016-02-25T20:41:08.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-03-10T19:57:35.000Z (about 9 years ago)
- Last Synced: 2025-03-01T19:03:45.594Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 25.4 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mzcore-uikit
Simple components for mzcore, includes: `` `` ``
## Install
* Install with bower: `$ bower install mzcore-uikit --save`
* Include the following line where you want use this components
```typescript
// in your own module 'modules/select_user_page.ts'
import * as uikit 'bower_components/mzcore-uikit/index'
```
```typescript
// or in 'components/components.ts'
export * from 'bower_components/mzcore-uikit/index'
```
* We are ready to use the components
# Components
## ``
Is a simple autocomplete component with a very basic style, so you can add a custom theme. It extends MzInput in order to use with a `mz-model="selectedItem"` attribute.
You must provide a method used for fullfill the autocomplete list, this method should return a Promise which resolves as an array with values or objects.
### Usage:
```xml
...
{scope.Name} ({scope.Email})
...
```
```typescript
/// myController.ts
interface IUser { Name: string; Email: string; }
@MyController.Template(`myView.xml`)
export class MyController extends mz.widgets.BasePagelet /* or mz.app.Page or any other widget or component */ {
@MyController.proxy
selectedUser: IUser;
performSearch(typedText: string){
return mz.xr.get(mz.xr.urlEncode `@api/users?filter=${typedText}`)
.then(x => x.data);
}
/*
perfomSearch(){
return Promise.resolve(
[
{ Name: 'Agustin', Email: '[email protected]' },
{ Name: 'Uriel', Email: '[email protected]' }
]
);
}
*/
}
```
You also can initialize with a value:
```typescript
export class UserSearchWindow extends mz.app.Page {
@UserSearchWindow.proxy
selectedUser = {
Name: 'Agustin',
Email: '[email protected]'
}
}
```
## ``
Provides a simple way for creating tabbed content.
### Usage
```xml
User's wall
Message list
Message list
```
renders as:
```html
-
Wall
-
Messages
-
Photos
User's wall
```