{"id":21822531,"url":"https://github.com/oardi/mithrilmdl","last_synced_at":"2025-10-27T18:07:48.456Z","repository":{"id":57298478,"uuid":"98412937","full_name":"oardi/mithrilmdl","owner":"oardi","description":"Collection of reusable Material Design Lite components to build modern web browser applications through MithrilJs 1.x.","archived":false,"fork":false,"pushed_at":"2017-08-31T21:17:00.000Z","size":304,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-20T01:50:25.297Z","etag":null,"topics":["babel-jsx","hyperscript","jsx","library","material","material-design","material-design-lite","mithriljs","webpack"],"latest_commit_sha":null,"homepage":"http://mithril-mdl.muchadev.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oardi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-26T10:54:14.000Z","updated_at":"2020-12-03T17:28:48.000Z","dependencies_parsed_at":"2022-08-26T18:12:12.905Z","dependency_job_id":null,"html_url":"https://github.com/oardi/mithrilmdl","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/oardi/mithrilmdl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oardi%2Fmithrilmdl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oardi%2Fmithrilmdl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oardi%2Fmithrilmdl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oardi%2Fmithrilmdl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oardi","download_url":"https://codeload.github.com/oardi/mithrilmdl/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oardi%2Fmithrilmdl/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265418061,"owners_count":23761735,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-jsx","hyperscript","jsx","library","material","material-design","material-design-lite","mithriljs","webpack"],"created_at":"2024-11-27T17:16:05.970Z","updated_at":"2025-10-27T18:07:48.395Z","avatar_url":"https://github.com/oardi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Material Design Lite Components for MithrilJs\n\n## Documentation\n[http://mithril-mdl.muchadev.com](http://mithril-mdl.muchadev.com)\n\n## JsFiddle Examples\n* Standalone + Hyperscript - [https://jsfiddle.net/oardi/ue9ouymq/](https://jsfiddle.net/oardi/ue9ouymq/)\n* Babel + JSX - [https://jsfiddle.net/oardi/qb7sq6yz/](https://jsfiddle.net/oardi/qb7sq6yz/)\n* Babel + JSX Drawer - [https://jsfiddle.net/oardi/o8ag2hy9/](https://jsfiddle.net/oardi/o8ag2hy9/)\n\n\n## Include Fonts\nInclude Google Material Design Icons from Google CDN: \u003cbr/\u003e\n```css\n\u003clink href=\"https://fonts.googleapis.com/icon?family=Material+Icons\" rel=\"stylesheet\"\u003e\n```\n\n\n## Installation\n\n### NPM\n```js\nnpm install mithrilmdl --save\n```\n\n### Github\n```js \nnpm install https://github.com/oardi/mithrilmdl --save\n```\n\n### Standalone\nUse the bundle inside \"dist\" from this repository and include the script into your HTML.\n\n\n## Usage\n\n### Standalone\nCreate an index.html and add the scripts \"mihtriljs\" and \"mithrilmdl\" and create a const from \"mithrilmdl\". \u003cbr/\u003e\n\n```html\n\u003cscript src=\"libs/mithril.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"libs/mithrilmdl.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    const { Button } = window.mithrilmdl;\n\u003c/script\u003e\n```\n\n\n### Webpack + Babel + JSX\n\nSteps:\n\n#### Create \".babelrc\"\n```js\n{\n    \"presets\": [\"es2015\"],\n    \"plugins\": [\n        \"transform-async-to-generator\",\n        [\"transform-react-jsx\", {\n            \"pragma\": \"m\"\n        }]\n    ]\n}\n```\n\n#### Create a minimal \"webpack.config.js\"\n```js\nconst webpack = require('webpack');\nconst path = require('path');\n\nrequire(\"babel-core/register\");\nrequire(\"babel-polyfill\");//es5 polyfills\n\nmodule.exports = {\n    entry: ['babel-polyfill', './src/app/app.js'],\n    output: {\n        path: path.resolve(__dirname, './dist'),\n        filename: 'app.bundle.js',\n    },\n    devtool: 'source-map',\n    module: {\n        rules: [\n            { test: /\\.js$/, loader: 'babel-loader' },\n            { test: /\\.css$/, loaders: ['style-loader', 'css-loader'] },\n            { test: /\\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] },\n            { test: /\\.(ttf|otf|eot|svg|woff(2)?)(\\?[a-z0-9]+)?$/, loader: 'file-loader?name=assets/[name].[ext]' },\n        ]\n    }\n}\n```\n\n#### Import the components needed from \"mithrilmdl\"\n```js\nimport { Button } from 'mithrilmdl'\n```\n\nor as a single object\n```js\nimport * as Mdl from 'mithrilmdl'\n```\n\n\n### Using a component\nFor instance using the Mdl.Button component: \u003cbr/\u003e\nCode JSX: \u003cbr/\u003e\n\n```js\n\u003cButton raised colored title=\"I am a button\" /\u003e\n```\n\u003cbr/\u003e\n\nCode ES5: \u003cbr/\u003e\n```js\nm(Button, { raised:true, colored:true, title:\"I am a button\" })\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foardi%2Fmithrilmdl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foardi%2Fmithrilmdl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foardi%2Fmithrilmdl/lists"}