{"id":26769900,"url":"https://github.com/bbuck/react-mdl","last_synced_at":"2025-03-28T22:46:22.322Z","repository":{"id":57608094,"uuid":"40525848","full_name":"bbuck/react-mdl","owner":"bbuck","description":"React bindings for material-design-lite.","archived":false,"fork":false,"pushed_at":"2015-08-26T19:43:51.000Z","size":228,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-06-20T16:50:03.907Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/bbuck.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}},"created_at":"2015-08-11T06:38:59.000Z","updated_at":"2015-08-21T03:39:37.000Z","dependencies_parsed_at":"2022-09-03T03:02:37.471Z","dependency_job_id":null,"html_url":"https://github.com/bbuck/react-mdl","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbuck%2Freact-mdl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbuck%2Freact-mdl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbuck%2Freact-mdl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbuck%2Freact-mdl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bbuck","download_url":"https://codeload.github.com/bbuck/react-mdl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246112648,"owners_count":20725300,"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":[],"created_at":"2025-03-28T22:46:21.788Z","updated_at":"2025-03-28T22:46:22.315Z","avatar_url":"https://github.com/bbuck.png","language":"JavaScript","readme":"# React MDL\n\nReact MDL is a wrapper for Google's great [material-design-lite](http://www.getmdl.io/)\nlibrary making it usable from Facebook's [React.js](http://facebook.github.io/react/).\nThe goal is to make it much easier to integrate MDL into a React based client\napplication - avoiding the sometime numerous classes for achievement\n(`mdl-button mdl-js-button`).\n\n## Usage\n\n### Base Component\n\nThe core of React MDL is the `Componet` which represents a basic element with\nMDL features. To create a badge, you can simply specify:\n\n```jsx\n\u003cComponent badge={10}\u003e\n  \u003cIcon\u003eaccount_box\u003c/Icon\u003e\n\u003c/Component\u003e\n```\n\nWhich will result in:\n\n```html\n\u003cdiv class=\"mdl-badge\" data-badge=\"10\"\u003e\n  \u003ci class=\"material-icons\"\u003eaccount_box\u003c/i\u003e\n\u003c/div\u003e\n```\n\n### Responsive Grid\n\nTo create a \"Grid\" row, simply use the `Grid` class.\n\n```jsx\n\u003cGrid /\u003e\n```\n\n```html\n\u003cdiv class=\"mdl-grid\"\u003e\u003c/div\u003e\n```\n\nCells are placed inside grids to leverage the space. Cells consume column spacing.\n\n```jsx\n\u003cGrid\u003e\n  \u003cCell cols=\"4\"\u003e\n    Hello, World!\n  \u003c/Cell\u003e\n\u003c/Grid\u003e\n```\n\n```html\n\u003cdiv class=\"mdl-grid\"\u003e\n  \u003cdiv class=\"mdl-cell mdl-cell--4-col\"\u003e\n    Hello, World!\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Buttons\n\nButtons a represented by the `Button` component which provides easy ways of\nspeicfying specific MDL button styles. The basic usage of a button:\n\n```jsx\n\u003cButton\u003eButton\u003c/Button\u003e\n```\n\n```html\n\u003cbutton class=\"mdl-button mdl-js-button\"\u003eButton\u003c/button\u003e\n```\n\nRipple effects can be added to a button type with the simple `ripple`\nboolean attribute.\n\n```jsx\n\u003cButton ripple\u003eRipples\u003c/Button\u003e\n```\n\n```html\n\u003cbutton class=\"mdl-button mdl-js-button mdl-js-ripple-effect\"\u003eRipples\u003c/button\u003e\n```\n\nThere are five different kinds of buttons. Normal buttons are achieved without\nany special classes, and appear as basic with hover effects. Then there is the\nthe `fab` button type which is a circle:\n\n```jsx\n\u003cButton fab\u003e\n  \u003cIcon\u003eadd\u003c/Icon\u003e\n\u003c/Button\u003e\n```\n\n```html\n\u003cbutton class=\"mdl-button mdl-js-button mdl-button--fab\"\u003e\n  \u003ci class=\"material-icons\"\u003eadd\u003c/i\u003e\n\u003c/button\u003e\n```\n\nThe `fab` type has a miniature version, the `miniFab` which is done much the\nsame way as the `fab`. Next there is the `raised` button type which makes\nnormal MDL buttons appear (without hover) with a shadow to pop from the background.\n\n```jsx\n\u003cButton raised\u003eRaised\u003c/Button\u003e\n```\n\n```html\n\u003cbutton class=\"mdl-button mdl-js-button mdl-raised--button\"\u003eRaised\u003c/button\u003e\n```\n\nThe final button type is for icon only buttons.\n\n```jsx\n\u003cButton icon\u003e\n  \u003cIcon\u003emood\u003c/Icon\u003e\n\u003c/Button\u003e\n```\n\n```html\n\u003cbutton class=\"mdl-button mdl-js-button mdl-button--icon\"\u003e\n  \u003ci class=\"material-icons\"\u003emood\u003c/i\u003e\n\u003c/button\u003e\n```\n\nThere are few additional classes for coloring buttons in specific ways. The\n`colored` attribute will apply whichever color is normally used for the given\nbutton type. The `primary` attribute will apply the primary theme color overriding\nthe `colored` attribute (some buttons, like `fab`s are colored by the accent color\nby default). Then there is `accent` to force the accent color on the button.\n\n[Work in progress...]\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbuck%2Freact-mdl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbbuck%2Freact-mdl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbuck%2Freact-mdl/lists"}