erikvullings / mithril-materialized Goto Github PK

View Code? Open in Web Editor NEW

25.0 5.0 2.0 19.51 MB

A Materialize-css library for the Mithril framework.

Home Page: https://erikvullings.github.io/mithril-materialized/index.html

License: MIT License

HTML 0.19% TypeScript 93.09% CSS 4.41% JavaScript 2.32%

mithril mithril-components mithril-ui materializecss materialize-css materialize

mithril-materialized's Introduction

mithril-materialized

A materialize-css library, available on npm, 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.

Supported components:

Buttons
- Button
- FlatButton
- RoundButton
- SubmitButton
Inputs
- TextInput
- TextArea
- AutoComplete
- UrlInput
- EmailInput
- NumberInput
- ColorInput
- RangeInput
- Chips
Pickers
- DatePicker
- TimePicker
Selections
- Select
- Options
- RadioButtons
- Switch
- Dropdown
Collections
- Basic, Link and Avatar Collections
- Collapsible or accordion
Others
- ModalPanel
- MaterialBox
- Carousel
- Pagination
- Parallax
Additional
- Label
- HelperText
Not from Materialize-CSS
- CodeBlock
- Kanban
- MapEditor
- Timeline

Usage instructions

See the documentation 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.

Build instructions

This 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.

To 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 in case port 1234 is not occupied already.

CSS

Although 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.

import 'mithril-materialized/dist/index.css';

Here are the styles I've added.

/* For the switch */
.clear,
.clear-10,
.clear-15 {
  clear: both;
  /* overflow: hidden; Précaution pour IE 7 */
}
.clear-10 {
  margin-bottom: 10px;
}
.clear-15 {
  margin-bottom: 15px;
}

span.mandatory {
  margin-left: 5px;
  color: red;
}

label+.switch {
  margin-top: 1rem;
}

/* For the color input */
input[type='color']:not(.browser-default) {
  margin: 0px 0 8px 0;
  /** Copied from input[type=number] */
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #9e9e9e;
  border-radius: 0;
  outline: none;
  height: 3rem;
  width: 100%;
  font-size: 16px;
  padding: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: border 0.3s, -webkit-box-shadow 0.3s;
  transition: border 0.3s, -webkit-box-shadow 0.3s;
  transition: box-shadow 0.3s, border 0.3s;
  transition: box-shadow 0.3s, border 0.3s, -webkit-box-shadow 0.3s;
}

/* For the options' label */
.input-field.options > label {
  top: -2.5rem;
}

/* For the code block */
.codeblock {
  margin: 1.5rem 0 2.5rem 0;
}
.codeblock > div {
  margin-bottom: 1rem;
}
.codeblock > label {
  display: inline-block;
}

mithril-materialized's People

Contributors

Stargazers

Watchers

Forkers

wingumd drmanac

mithril-materialized's Issues

SELECT component - id = 0

When the checkedId is 0, it is ignored.

Date picker onchange resets other changes

When the date picker onchange is called, it seems that its state is the initial state, not the current state, causing other elements to reset.

How do I start using this?

Hi Erik,
This looks really cool, and I'm sure it's setup currently for your easy use, since you're .. well the main one using it. :) But for others new to trying to use it, if you could have more "step-by-step here's how to get going" it would be a great help.

Note: I realize this is cool stuff you're probably working on in your free time, but since it looks to beautiful if we can have docs for easy entry for new people to get up and running that would be sweet.

My current mithril setup is just an html with link and script tags. When I use other frameworks, like preact, ember, or angular I'm spoiled with a CLI that could easily pull in cool add-ons such as what you've built here, but I don't know of such a stream-lined start or yomen generator for mithril. this means I must overcome an emotional hurdle to try and hand stictch such a solution together just to start being productive and try things out. (This may be because I'm new to the mithril community, and its set of ideals of light, simple and fast, but it feels like mithril had a missing piece here.)

So I did end up just cloning this and running npm install and npm run start, but this lead to some

'parcel' is not recognized as an internal or external command, operable program or batch file

Next I gave npm install -g parcel-bundler a try.
After I did npm run start run the server for localhost:1234 which seemed happy. but then I got

🚨 Build Error
D:\src\test-idea\node_modules\mithril-materialized\dist\button.js:1:25: > Cannot resolve dependency 'tslib'

I hope this feedback has some value. My hope is that you continue to enjoy your code 🌟 🎩 wizardry 👨‍🏫 , and offering up neat stuff like this to the community. I really do appreciate folks like yourself trying to share your work with the world and to keep mithril modern and wired up with strong helper features. Keep it up!

Type 'unknown' does not satisfy the constraint 'Lifecycle<ISelectOptions, unknown>'.

Using TS 3.5.2 and when I compile I get the following when using the TextInput field

   m(TextInput, {
                label: "First Name",
                value: firstName,
            }),

node_modules/mithril-materialized/dist/layout-form-generator.d.ts:62:240 - error TS2344: Type 'unknown' does not satisfy the constraint 'Lifecycle<ISelectOptions, unknown>'.

I can get around this issue by manually replacing "unknown" to "any" but should this be kept as "any"? Is there anything I should do so that unknown will work?

mithril-materialized/packages/lib/src/utils.ts
...
const inputAttributes = [
  'min',
  'max',
  'minLength',
  'maxLength',
  'rows',
  'cols',
  'placeholder',
  'autocomplete',
  'pattern',
  'readOnly',
];

Error : t is not a function

Hello

Thank you very much for your nice library.
I am trying to test it on Flems,I got the following errror "t is not a function"

Can you tell me what ma I doing wrong ?

Regards

FlemTest