Comment utiliser les documents-cadre de l'interface utilisateur?

Je suis à la planification de l'utilisation de Matériel-UI framework CSS (http://material-ui.com) afin de concevoir des front-end d'un site web, mais je n'ai pas la moindre idée sur la façon d'utiliser ce cadre.

Je ne suis pas familier avec beaucoup de MNP, Browserify, etc. J'ai juste besoin de savoir comment dois-je commencer pour apprendre la façon d'utiliser ce framework CSS.

Merci pour toute aide!

Trouvé une solution? Je suis toujours à errer sur la façon de commencer le développement. Je suis exactement dans le même état que vous l'avez mentionné ci-dessus.
Salut @bozzmob et tous, je peux vous recommander mon Tape Matériel de l'INTERFACE utilisateur de Style Exemple.
Aussi, voici un article de la mine sur la façon d'utiliser le Matériel-INTERFACE utilisateur: Matériel-INTERFACE utilisateur: prise en main (Rapide!) ⚡ Réagir 16+

InformationsquelleAutor jmosawy | 2015-03-22

material-design material-ui

39

De ne pas être intimidés par l' (apparente) de la complexité de webpack et d'autres (grands) construire des outils, et ne soyez pas découragés par les envieux que des idiots qui disent des choses comme "Pour être honnête, je pense que vous avez un gros problème pour utiliser ce genre de choses."

La raison pour laquelle le matériau de l'interface utilisateur de mise en œuvre (utilisation) est sur la base de ces outils est parce que c'est actuellement le meilleur moyen d'écrire des logiciels et de la compréhension de ce et d'autres cadres de travail est un excellent moyen pour savoir pourquoi c'est la "bonne" voie, et de devenir compétent dans l'écriture de la qualité du code modulaire.

Webpack, et les autres outils de construction, il existe pour un but: créer un fichier "principal" à partir de votre application du code source qui peut être lu et transmis à votre navigateur de manière efficace. Disparu depuis longtemps sont les jours où nous allions écrire un tas de comprendre (script) des balises pour chaque ressource (fichier) nous avons besoin dans nos pages et d'avoir ainsi nos utilisateurs attendre jusqu'à ce que tous ces fichiers ont été téléchargés à partir de notre serveur (ou plusieurs sites par exemple: cdn) et puis la page de chargement. L'efficacité est basée sur le fait que vous pouvez fournir un (souvent minimisé/comprimé) fichier qui contient tout le code, et le code qu'il dépend (par exemple, Réagir ou même de jQuery).

Construire des outils d'accomplir ceci, en vous posant les 3 choses: ce fichier pour démarrer avec (entrée principale), quels sont les outils (chargeurs) à utiliser pour traiter les non-autochtones du code JavaScript dans votre code (scss, jsx, etc) et ce fichier pour créer le résultat (converti et minifiés de sortie). Ce fichier de sortie sera celui que vous utilisez dans votre code html import/balise de script. Il contiendra votre code et toutes les autres dépendances, ce qui serait un cauchemar à inclure et à résoudre manuellement vous-même. Ici est un bon guide pour débutants.

Matériau de l'interface utilisateur, comme beaucoup d'autres cadres (la raison pour laquelle j'ai pris le temps d'expliquer tous les ci-dessus) est construit avec la modularité de l'esprit: des morceaux de code peut être "collé" ou "reconstitué" ensemble comme des Legos, afin de construire facilement les grandes pièces. Pour ce faire, vous simplement y compris les composants dont vous avez besoin dans tous les composants que vous créez. Ils sont de Réagir à des composants qui sont un moyen simple de définir (écrire/créer) les "blocs de construction" de votre site/application. Il y a des tonnes de vidéos et tutoriels pour vous obtenir ont commencé à Réagir (mon préféré est reactjsprogram.com par Tyler McGinnis).

Pour vous aider à démarrer avec le matériel-de l'interface utilisateur, ils ont créé quelques exemples pour commencer à l'aide de webpack. Suivez les étapes simples pour installer les mnp et les dépendances (vous pouvez les trouver dans le paquet.json) et ouvrez le répertoire /src dans votre éditeur. Vous allez comprendre en un rien de temps.

Vous êtes dans la bonne voie avec la bonne attitude en posant des questions, apprendre à être un bon développeur, des recherches et essayer de trouver la meilleure façon d'atteindre votre objectif.
- "l'utilisation de webpack" le lien est cassé
- Est-il possible de l'utiliser sans Réagir? Juste un .css et .js et si, éventuellement, d'un bijou?
InformationsquelleAutor acyuta108

Avait à peu près le même problème. Voulu un façon simple de commencer à utiliser le matériel-interface utilisateur sans le charabia. Voici ce que j'ai fait:

npm install material-ui
npm install -g webpack
webpack node_modules/material-ui/lib/index.js material-ui.js

Cela m'a donné un fichier javascript, material-ui.js, je pourrais l'inclure dans mon code HTML. Dans mon cas, je suis à l'aide d'électrons, donc c'est mon HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>examples</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<body>
    <div id="content"></div>

    <script>
        require('./material-ui.js')
    </script>

    <script type="text/babel">      
        import React from 'react';
        import FlatButton from 'material-ui/lib/flat-button';


        const FlatButtonExampleSimple = () => (
          <div>
            <FlatButton label="Default" />
            <FlatButton label="Primary" primary={true} />
            <FlatButton label="Secondary" secondary={true} />
            <FlatButton label="Disabled" disabled={true} />
          </div>
        );      

        ReactDOM.render(
          <FlatButtonExampleSimple />,
          document.getElementById('content')
        );
    </script>
</body>
</html>

Où voulez-vous insérer npm install material-ui ?
C'est une commande à exécuter à partir du shell. Ne pas aller dans n'importe quel fichier.
Mais où, dans l'invite de commande? N'importe où je l'ai essayer, dit " 'npm' n'est pas reconnu comme une commande interne ou externe"
Nœud d'installation. mnp est inclus. Suivez les installer direction nodejs.org/en/download
webpack node_modules/material-ui/lib/index.js material-ui.js => ERREUR dans le multi node_modules/material-ui/lib/index.js material-ui.js Module non trouvé: Erreur: ne Peut pas résoudre 'node_modules/material-ui/lib/index.js " dans"./' @ multi node_modules/material-ui/lib/index.js material-ui.js

InformationsquelleAutor dkantowitz

10

Matériel-l'INTERFACE utilisateur est un ensemble de Réagir composants en plus d'être un framework CSS. Je ne sais pas si vous pouvez obtenir beaucoup d'utilisation hors de lui sans comprendre, Réagir.

La façon la plus simple pour commencer est d'installer le exemples et à partir de là.

Si vous ne voulez pas avoir affaire avec un frontend cadre comme Réagir, et vous voulez juste les fichiers CSS et JS avec un temps d'installation aussi rapide que Bootstrap, découvrez la Matérialiser bibliothèque.
- J'ai essayé d'utiliser Matérialiser, et honnêtement, il vous aidera dans la même gâchis de l'outillage comme tout le reste. Le CSS qu'il génère est très redondant, il est donc difficile de faire beaucoup de sens de personnalisation sans modifier le SASS code source et le bâtiment.
- Matérialiser ne fonctionne que sur Chrome, IE, Firefox et Safari
InformationsquelleAutor clay_to_n
3

Pour être honnête, je pense que vous avez un gros problème pour utiliser ce genre de choses.

Tout d'abord, cela dépend Facebook de la Vue de cadre de appelé à Réagir si vous avez bien savoir certaines choses de base.

Deuxièmement,Réagir est totalement javascript trucs et si vous l'utilisez par codage de la plaine de javascript, qui est un autre gros problème qui peut vous arrêter.sinon, si vous utilisez la syntaxe de sucre appelé jsx, vous avez encore besoin de payer beaucoup de temps pour bien apprendre, de sorte que vous pouvez savoir comment Réagir travail, et puis vous pouvez l'utiliser dans votre projet.

En troisième lieu, avant de le mentionné ci-dessus se produisent, il y a encore plusieurs choses nécessaires que vous n'avez pas besoin de savoir bien NodeJs ou webpack ou MNP, mais au moins, vous devez savoir comment bien les utiliser comme de simples outils.

Donc, est-il indispensable que vous n'avez pas d'autre choix que d'avoir à utiliser ce genre de choses et d'agir uniquement comme un simple framework css?

Si pas! vous pouvez donner jusqu'à maintenant, sauf que vous êtes prêt à apprendre des tonnes de dépendances!!!

Si oui! Je vous conseille d'installer nodejs d'abord, puis installez mnp et ensuite utiliser npm pour installer réagir peut-être que vous avez encore besoin d'installer quelques outils comme babel browserify ou webpack(le meilleur) et puis les plonger dans de Réagir, et puis vous pouvez commencer à apprendre comment utiliser MUI~ sons...de masse

Il n'y a pas un moyen rapide de ramassage façon pour MUI comme ils l'ont dit!
- Ce que vous dites à propos de Réagir est vrai. Cependant, même si vous savez comment l'utiliser Réagir (j'ai en quelque sorte de faire), matériau ui exige de vous apprendre à intégrer avec tout un tas d'outils de développement tels que browserify ou webpack et/ou gulp. Est-ce vraiment nécessaire? Je veux dire, ne peut-il pas être juste un fichier JS je peux inclure similaire à Réagir, Babel, etc.?
- Non, je ne pense pas que c'est nécessaire. Comme vous le savez, MUI n'est pas juste un seul fichier, il contient beaucoup de composants, de sorte que si l'utilisation webpack ou browserify ou glup de travailler avec serait mieux. Je ne pense pas que c'est un must, bien sûr, vous pouvez inclure chaque fichier à l'aide de l'exiger de fonction ou le mot-clé import de l'ES6. Si vous avez installé l'ensemble de MUI comme une dépendance via npm, vous pouvez inclure chaque fichier que vous voulez.
- Il ya beaucoup de grandes ressources pour commencer à utiliser le Matériel de l'INTERFACE utilisateur. Voici un lien vers la documentation où vous pouvez trouver des exemples de projets pour commencer. material-ui.com/getting-started/example-projects
InformationsquelleAutor Joephon
2

Si vous utilisez le réagissent+redux, vous pouvez utiliser le
https://github.com/takanabe/react-redux-material_ui-boilerplate

modèle.

InformationsquelleAutor Ford Guo
1

J'ai écrit un exemple de nœud de projet montrant comment intégrer réagir composant pour la consommation dans les pays non-réagir sites web à l'aide de webpack. C'est une approche similaire à dkantowitz, à l'exception qu'il supprime la nécessité d'introduire de réagir ou reactDom à la consommation de site web.

L'exemple, comme on aurait besoin d'être étendu pour permettre l'utilisation de plusieurs composants (comme le matériau d'interface utilisateur), mais je pense que c'est un bon point de départ pour voir ce qui est impliqué avec webpack et babel etc

InformationsquelleAutor witnessmenow

Vous devez vous connecter pour publier un commentaire.