标签: semantic-ui-react

使用 React Semantic UI，默认外观是这样的

这是生成该组件的代码（来自网站）。

import React, { Component } from 'react'
import { Icon, Menu } from 'semantic-ui-react'

export default class MenuExampleCompactVertical extends Component {
  state = {}

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state

    return (
      <Menu compact icon='labeled' vertical inverted>
        <Menu.Item name='gamepad' active={activeItem === 'gamepad'} onClick={this.handleItemClick}>
          <Icon name='gamepad' />
          Games
        </Menu.Item>

        <Menu.Item
          name='video camera'
          active={activeItem === 'video camera'}
          onClick={this.handleItemClick}
        >
          <Icon name='video camera' />
          Channels …

我发现我的项目的常见供应商非常大.

我想看看哪个模块对大尺寸负责,发现语义-ui-react本身就是1.74M.

react-vendor.js 1.74 MB 2 [emit] [big] react-vendor

'react-vendor': [
   'semantic-ui-react',
 ],

  new CommonsChunkPlugin({
    name: "react-vendor",
    filename: "react-vendor.js",
    minChunks: Infinity,
  }),

有什么办法可以让文件变小吗？

有谁知道如何删除<Menu><Dropdown>...组件上的插入符号？

据我所知，该组件的属性列表没有标志。有任何人对此有经验吗？

import React from 'react'
import { Dropdown, Menu } from 'semantic-ui-react'
import { Menu as MenuIcon } from 'react-feather'

// this automatically renders a right-hand caret on the menu
// I added my own icon 'MenuIcon' from the feather icon set 
// and i want to get rid of the caret
const Header = () => (
  <Menu vertical compact>
    <Dropdown item text={<MenuIcon/>}>
      <Dropdown.Menu>
        <Dropdown.Item>Electronics</Dropdown.Item>
        <Dropdown.Item>Automotive</Dropdown.Item>
        <Dropdown.Item>Home</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  </Menu>
)

export default Header

语义UI有一种很好的方式将通用大小应用于很多东西，例如按钮（在语义UI React中）：

<Button size="tiny"  />

但是，下拉菜单在许多情况下看起来就像一个按钮，并与按钮放在一行中，似乎没有采用“ size”参数。

https://react.semantic-ui.com/modules/dropdown

是否有一个很好的方法将下拉列表中的大小与其他元素（例如，连续的按钮）相同？（即不仅摆弄自定义CSS，而且更易于维护）。

这是我的动态表单的一个简单示例。

<Form.Group widths='equal'>
                    <Form.Input onChange={props.handleChange} fluid name={`${type}.${participant.number}.firstName`}
                                label={FIRST_NAME}
                                placeholder={FIRST_NAME_MODEL_DESCR}/>
                    <Form.Input onChange={props.handleChange} fluid label={LAST_NAME}
                                name={`${type}.${participant.number}.lastName`}
                                placeholder={LAST_NAME_MODEL_DESCR}/>
       </Form.Group>

在 Fromik 本身中，我有简单的 console.log

    validate={values => {
        console.log(values);
    }}

因此，每次当我在字段中输入内容时，每次按下按键时，我都会从验证中获取日志结果（我不想要），并且每次按下按键时都会有微延迟。

我试图使用语义-ui-react提供的Spinner来覆盖react-table提供的默认加载器。但这似乎不起作用。我维护了三个组件；一个是应用程序，一个用于数据网格，另一个用于微调器。有人可以帮我吗？

沙箱：https://codesandbox.io/s/react-table-row-table-g3kd5

应用程序组件

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      columns: [],
      loading: true
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    let data = [
      { firstName: "Jack", status: "Submitted" },
      { firstName: "Simon", status: "Pending" },
      { firstName: "Pete", status: "Approved" }
    ];
    setTimeout(() => {
      this.setState({ data, loading: false }); …

我创建了一个货币输入 React 组件来允许用户输入数值。我将输入类型设置为“数字”。这仅适用于 Chrome（用户仍然可以在 Firefox 中输入非数字值）。

货币输入组件：

import React from "react";
import { Form } from "semantic-ui-react";

interface ICurrencyInputProps {
  onChange(value: any): void;
  checkRange?: boolean;
  min: number;
  max: number;
  validationMessage: string;
  cssClasses?: string;
}

export class CurrencyInput extends React.Component<ICurrencyInputProps> {
  state = {
    showInvalidError: false,
    value: null
  };
  render() {
    return (
      <>
        <Form.Input
          icon="pound"
          iconPosition="left"
          placeholder="Whole pounds"
          className={this.props.cssClasses}
          type="text"
          error={this.state.showInvalidError}
          onChange={(event: any) => {
            let value = null;
            if (event.target.value) value = parseInt(event.target.value);

            this.setState({ value: value });
            this.props.onChange(value);
          }} …

我正在使用Item（Semantic UI React）并且我想将图像设置为链接。但是我如何引用链接 URL？

<Item>
    <Item.Image src={this.props.fileUrl} size='tiny' as='a' />
    <Item.Content>
    </Item.Content>
</Item>

如果我包裹Item.Image在一个a-container 中，填充就会变得一团糟......

我正在尝试将reactx-form与react-semantic-ui一起使用,并且在使用Checkbox组件时遇到了问题.该复选框没有被选中.我已经按照redux-form文档中的示例进行了操作,但没有运气.这是代码段:

renderCheckBox = ({ input, label }) => {
  console.log(input.value);
  return (
    <Form.Field>
      <Checkbox
        label={label}
        checked={input.value ? true : false}
        onChange={input.onChange}
        />
    </Form.Field>
    );
};



<Field
  name="activated"
  label="Activate?"
  component={this.renderCheckBox}
/>

输出console.log(input.value)是空的.

如果我为某些组件设置了一个类名，比如

<Segment className="Change" color='blue' inverted></Segment>

在我的 css 中我使用

.Change:hover{
  background-color: black; //or any other change on hover
}

悬停时没有任何内容被覆盖。

我还注意到有许多其他组件拒绝我的更改，似乎是随机的。一个语义组件会让我改变宽度，而下一个则不会。是同一个问题的原因吗？如何覆盖悬停时的颜色？