标签: materialize

为什么我的图标被放置为一列而不是一行？

我正在尝试使用将这些图标对齐为一行，className="col s1"但是当我运行此代码时，由于某种原因它显示在列中。我尝试删除容器标签，添加它，尝试更改列大小，但由于某种原因它始终显示为列而不是行。

有什么办法可以让它发挥作用吗？

这是代码的链接：项目

主.jsx

import React, { useState, useEffect, useRef } from "react";
import Helmet from "react-helmet";
import Socials from "./Socials";
function Main(props) {
  const socialMedia = [
    {
      link: "https://www.linkedin.com/in/",
      icon: "linkedin"
    },
    {
      link: "https://github.com/",
      icon: "github"
    },
    {
      link: "https://www.youtube.com/",
      icon: "youtube"
    },
    {
      link:
        "mailto:example@ex.co?subject=Felipe%20GD%20--%20Request%20To%20Contact",
      icon: "email"
    }
  ];

  return (
    <React.Fragment>
      <Helmet>
        <title>Felipe GD</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Helmet>
      <div className="container">
        <div clasName="row">
          {socialMedia.map((socials) => (
            <Socials
              getOpacity={null}
              getVisibility={null}
              link={socials.link} …

Run Code Online (Sandbox Code Playgroud)

javascript materialize reactjs

Pyl*_*lot

lucky-day

5
推荐指数

1
解决办法

307
查看次数

为什么无法在移动设备上显示Google Material Icons

我正在使用Materialisecss,它使用Google设计图标.在某些手机上,可以显示Google Material-Icons.是什么造成的？

svg text-rendering css3 materialize material-design

Kam*_*cek

lucky-day

4
推荐指数

1
解决办法

2015
查看次数

如何在用户点击关闭btn时关闭Materialize模态？

我想在用户点击关闭按钮时关闭模态.我知道,如何在Bootstrap中执行此操作.你能帮到Materialize吗？

modal-dialog materialize

Bri*_*ius

2015 12-20

4
推荐指数

3
解决办法

3万
查看次数

滑动功能以实现标签选项卡

所以,我正在使用materializecss进行Web开发.

有一个标签功能,但它不支持在移动设备上滑动功能,如本机Android应用程序.

有谁知道我如何实现滑动功能呢？这有多难？

例如,以下是演示内容:

<div class="row">
    <div class="col s12">
        <ul class="tabs">
            <li class="tab col s3"><a href="#test1">Test 1</a></li>
            <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
            <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
            <li class="tab col s3"><a href="#test4">Test 4</a></li>
        </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>
</div>

Run Code Online (Sandbox Code Playgroud)

tabs swipe materialize

ste*_*Kim

lucky-day

4
推荐指数

2
解决办法

1万
查看次数

干净的方法来设计实体吐司中的通知/警报

我使用的设计在我的Rails应用程序和标准它配备了notice和alert其具体行动渲染(例如,用户签约在)的方法.

我也在使用Materialize CSS框架,它们提供了一个很好的干净"Toast"样式通知.这是制作notice和alert使用Toast 的第一种方法.

<% if notice %>
  <script type="text/javascript">
    Materialize.toast('<%= notice %>', 4000)
  </script>
<% end %>
<% if alert %>
  <script type="text/javascript">
    Materialize.toast('<%= alert %>', 4000)
  </script>
<% end %>

Run Code Online (Sandbox Code Playgroud)

任何人都可以提供更清洁/更干的解决方案吗？感觉有点hacky.

javascript ruby-on-rails erb devise materialize

Mik*_*ord

lucky-day

4
推荐指数

1
解决办法

4879
查看次数

Materialize CSS框架是否具有"容器流体"等价物？

我正在为朋友乐队创建一个网站,我认为这是学习新的移动第一框架的好时机.

我看到乐队正在做的最重要的事情之一是添加全宽图像(示例),我记得在Bootstrap中阅读这篇关于全宽行的文章,并通过Materialise的网格文档搜索,但无济于事.

我需要的是一种创建这个"全宽"行的方法,理想情况下不会破坏响应性.从我的理解,引导利用填充和利润率的"容器流体"(例如,width: 100%;,padding: 0; margin: -15px;,在那里body我相信有一个margin: 15px; padding: 15px;),这就容易使得全宽行,但Materiallize没有.任何帮助将不胜感激,我的设计技巧不是最好的!

html css materialize

h3x*_*r0l

lucky-day

4
推荐指数

1
解决办法

1万
查看次数

更改MaterialiseCSS中的导航栏颜色

我想从Materialize动态更改导航栏的背景颜色,因此需要通过CSS完成.我试过了

.nav-wrapper{
 background-color: <MYCOLOR HERE> !important;
}

Run Code Online (Sandbox Code Playgroud)

但它只是保持与导航栏类中提到的颜色相同.

css materialize

Sir*_*ime

lucky-day

4
推荐指数

1
解决办法

2万
查看次数

是否可以动态地将幻灯片添加到现有的Materialise Carousel？

我能描述创建一个旋转木马在这里.旋转木马显示并正常工作.

稍后我想添加一张额外的幻灯片:
$(".carousel").append('<a class="carousel-item active" href="#six!"><img src="http://lorempixel.com/250/250/nature/6"></a>');

但是,这似乎不起作用,因为幻灯片没有添加到轮播中.

将幻灯片添加到不支持的初始化轮播中,或者这是我的问题吗？

materialize

Pav*_*yak

2016 09-09

4
推荐指数

1
解决办法

2799
查看次数

更改行计数在materialize css文本区域中不起作用

在物化css文本区域中,是否可以使用"rows = '20'"初始化具有特定行数的文本区域？我们如何增加默认行数？

代码不起作用:

<div class="input-field col s12">
   <textarea id="textarea1" class="materialize-textarea" rows="20" ></textarea>
   <label for="textarea1">Text</label>
</div>

Run Code Online (Sandbox Code Playgroud)

html css materialize

Ami*_*oda

lucky-day

4
推荐指数

1
解决办法

4142
查看次数

如何使用物化css的sideNav与反应？

我正在用React开发一个应用程序,我想使用sidenav组件http://materializecss.com/side-nav.html

问题是我收到了这个错误:

Sidebar.js:8 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2_jquery___default(...)(...).sideNav is not a function
    at HTMLDocument.<anonymous> (Sidebar.js:8)
    at mightThrow (jquery.js:3534)
    at process (jquery.js:3602)

Run Code Online (Sandbox Code Playgroud)

我对导入组件,库的方式很困惑.它们有很多,并且有很多方法可以配置它.

我所做的是:

使用创建应用程序

CREATE-反应应用内
通过npm安装实现

npm install materialize-css @ next
创建反应应用程序

这是我正在使用的代码:

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/babel" src="js/materialize.min.js"></script>
  </body>
</html> …

Run Code Online (Sandbox Code Playgroud)

materialize reactjs sidenav

sir*_*ndy

lucky-day

4
推荐指数

1
解决办法

5442
查看次数