{"id":13628041,"url":"https://erikvullings.github.io/mithril-materialized/","last_synced_at":"2025-04-17T00:33:04.994Z","repository":{"id":43810575,"uuid":"157682357","full_name":"erikvullings/mithril-materialized","owner":"erikvullings","description":"A Materialize-css library for the Mithril framework.","archived":false,"fork":false,"pushed_at":"2025-03-13T16:54:28.000Z","size":21915,"stargazers_count":25,"open_issues_count":5,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-10T08:05:07.499Z","etag":null,"topics":["materialize","materialize-css","materializecss","mithril","mithril-components","mithril-ui"],"latest_commit_sha":null,"homepage":"https://erikvullings.github.io/mithril-materialized/index.html","language":"TypeScript","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/erikvullings.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-15T09:04:42.000Z","updated_at":"2025-03-13T16:54:33.000Z","dependencies_parsed_at":"2024-04-17T04:10:19.118Z","dependency_job_id":"a2475aa0-c1c3-4ba0-a9b9-a0a0517a2ae6","html_url":"https://github.com/erikvullings/mithril-materialized","commit_stats":{"total_commits":348,"total_committers":2,"mean_commits":174.0,"dds":"0.011494252873563204","last_synced_commit":"ebd0e3399137b96de23c3361ab480df232c8ab26"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikvullings%2Fmithril-materialized","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikvullings%2Fmithril-materialized/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikvullings%2Fmithril-materialized/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erikvullings%2Fmithril-materialized/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erikvullings","download_url":"https://codeload.github.com/erikvullings/mithril-materialized/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249253102,"owners_count":21238311,"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":["materialize","materialize-css","materializecss","mithril","mithril-components","mithril-ui"],"created_at":"2024-08-01T22:00:43.573Z","updated_at":"2025-04-17T00:33:04.678Z","avatar_url":"https://github.com/erikvullings.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# mithril-materialized\n\nA [materialize-css](https://materializecss.com) library, [available on npm](https://www.npmjs.com/package/mithril-materialized), for the Mithril framework (tested with v2.0.0-rc7 and higher, but presumably, it should work with v1.1.6 too), making it easier to use a Materialize theme in your application. This library provides you with Mithril components, wrapping around the materialize-css functionality.\n\nSupported components:\n\n- [Buttons](https://erikvullings.github.io/mithril-materialized/#!/buttons)\n  - Button\n  - FlatButton\n  - RoundButton\n  - SubmitButton\n- [Inputs](https://erikvullings.github.io/mithril-materialized/#!/inputs)\n  - TextInput\n  - TextArea\n  - AutoComplete\n  - UrlInput\n  - EmailInput\n  - NumberInput\n  - ColorInput\n  - RangeInput\n  - Chips\n- [Pickers](https://erikvullings.github.io/mithril-materialized/#!/pickers)\n  - DatePicker\n  - TimePicker\n- [Selections](https://erikvullings.github.io/mithril-materialized/#!/selections)\n  - Select\n  - Options\n  - RadioButtons\n  - Switch\n  - Dropdown\n- [Collections](https://erikvullings.github.io/mithril-materialized/#!/collections)\n  - Basic, Link and Avatar Collections\n  - Collapsible or accordion\n- [Others](https://erikvullings.github.io/mithril-materialized/#!/modals)\n  - ModalPanel\n  - MaterialBox\n  - Carousel\n  - Pagination\n  - Parallax\n- Additional\n  - Label\n  - HelperText\n- Not from Materialize-CSS\n  - CodeBlock\n  - SearchSelect, a searchable select dropdown\n  - [MapEditor](https://erikvullings.github.io/mithril-materialized/#!/map_editor)\n  - [Timeline](https://erikvullings.github.io/mithril-materialized/#!/timeline)\n\n## Usage instructions\n\nSee the [documentation](https://erikvullings.github.io/mithril-materialized/index.html) for examples on how to use this library in your own application. Please note that the library does not include mithril, nor the materialize-css JavaScript or CSS, so you have to include them yourself, as documented.\n\n## Build instructions\n\nThis repository consists of two packages, combined using `lerna`: the `lib` package that is published to `npm`, as well as an `example` project which uses this library to display the Mithril components that it contains.\n\nTo install the dependencies, you can use `npm i`, or, alternatively, use `pnpm m i` (assuming you have installed `pnpm` as alternative package manager using `npm i -g pnpm`) to perform a multi-repository install. Next, build everything using `npm start` and visit the documentation page on [http://localhost:1234](http://localhost:1234) in case port 1234 is not occupied already.\n\n## CSS\n\nAlthough I've tried to limit the CSS adaptations to a minimum, I needed to tweak certain parts to make it look better. You can either copy them manually, or import them, e.g.\n\n```ts\nimport 'mithril-materialized/dist/index.css';\n```\n\nHere are the styles I've added.\n\n```css\n/* For the switch */\n.clear,\n.clear-10,\n.clear-15 {\n  clear: both;\n  /* overflow: hidden; Précaution pour IE 7 */\n}\n.clear-10 {\n  margin-bottom: 10px;\n}\n.clear-15 {\n  margin-bottom: 15px;\n}\n\nspan.mandatory {\n  margin-left: 5px;\n  color: red;\n}\n\nlabel+.switch {\n  margin-top: 1rem;\n}\n\n/* For the color input */\ninput[type='color']:not(.browser-default) {\n  margin: 0px 0 8px 0;\n  /** Copied from input[type=number] */\n  background-color: transparent;\n  border: none;\n  border-bottom: 1px solid #9e9e9e;\n  border-radius: 0;\n  outline: none;\n  height: 3rem;\n  width: 100%;\n  font-size: 16px;\n  padding: 0;\n  -webkit-box-shadow: none;\n  box-shadow: none;\n  -webkit-box-sizing: content-box;\n  box-sizing: content-box;\n  -webkit-transition: border 0.3s, -webkit-box-shadow 0.3s;\n  transition: border 0.3s, -webkit-box-shadow 0.3s;\n  transition: box-shadow 0.3s, border 0.3s;\n  transition: box-shadow 0.3s, border 0.3s, -webkit-box-shadow 0.3s;\n}\n\n/* For the options' label */\n.input-field.options \u003e label {\n  top: -2.5rem;\n}\n\n/* For the code block */\n.codeblock {\n  margin: 1.5rem 0 2.5rem 0;\n}\n.codeblock \u003e div {\n  margin-bottom: 1rem;\n}\n.codeblock \u003e label {\n  display: inline-block;\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/erikvullings.github.io%2Fmithril-materialized%2F","html_url":"https://awesome.ecosyste.ms/projects/erikvullings.github.io%2Fmithril-materialized%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/erikvullings.github.io%2Fmithril-materialized%2F/lists"}