标签: semantic-ui-react
在Vite React项目中使用semantic-ui-less
我一直在尝试将semantic-ui-less包与semantic-ui-react一起安装，但是在运行时npm run dev出现此错误：
[less] '../../theme.config' wasn't found. Tried - /home/antp/Projects/semantic-test-less/node_modules/semantic-ui-less/theme.config,../theme.config,../../theme.config
5:56:10 PM [vite] Internal server error: [less] '../../theme.config' wasn't found. Tried - /home/antp/Projects/semantic-test-less/node_modules/semantic-ui-less/theme.config,../theme.config,../../theme.config
Plugin: vite:css
File: /home/antp/Projects/semantic-test-less/node_modules/semantic-ui-less/definitions/modules/transition.less:19:0
16 | @type : 'module';
17 | @element : 'transition';
18 |
| ^
19 | @import (multiple) '../../theme.config';
20 |
at less (file:///home/antp/Projects/semantic-test-less/node_modules/vite/dist/node/chunks/dep-79892de8.js:38906:33)
at async compileCSS (file:///home/antp/Projects/semantic-test-less/node_modules/vite/dist/node/chunks/dep-79892de8.js:38277:34)
at async TransformContext.transform (file:///home/antp/Projects/semantic-test-less/node_modules/vite/dist/node/chunks/dep-79892de8.js:37810:56)
at async Object.transform (file:///home/antp/Projects/semantic-test-less/node_modules/vite/dist/node/chunks/dep-79892de8.js:43387:30)
at async loadAndTransform (file:///home/antp/Projects/semantic-test-less/node_modules/vite/dist/node/chunks/dep-79892de8.js:41105:29)
编辑： my 的内容./src/semantic-ui/theme.config，尽管只是安装了包并导入semantic-ui-less/semantic.less到我的 React 条目文件中会导致错误。
/******************************* …推荐指数
解决办法
查看次数
如何从反应语义UI中的<Input />获取输入
我一直试图从一个input字段中获取输入并使用refs(通常的方式react),但它似乎没有工作.在input我得到的undefined.这是我的代码:
sendMessage = () => {
console.log(this.inputtext.value);
}
render(){
return(
<div>
<Input ref={input => this.inputtext = input;} placeholder='message'/>
<Button onClick={this.sendMessage}>Send</Button>
</div>
);
}
我需要从click event按钮中获取输入.我无法弄清楚出了什么问题.我怎样才能input正确获得价值？
推荐指数
解决办法
查看次数
如何在语义UI + React Dropdown组件中插入标签元素？
我想从语义UI重新创建以下Dropdown，其中<label>使用UI React在下拉菜单中插入a ：
（https://semantic-ui.com/collections/form.html#dropdown）
这是我希望我的React应用程序创建的降价促销：
<div class="ui form">
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
我正在努力通过语义UI的React UI实现来实现这一点。
我当前的尝试是这样的：
<Dropdown placeholder='What grade is your child in?' fluid selection
options={ grades }
labeled={ true }
name={ `survey_response[grade_${this.state.id}]` } />
清楚标明这一点非常重要。在用户研究中，我发现占位符仅作为一个问题提示就令人困惑。
有添加标签的文档，但是，它需要在Dropdown组件下嵌套子组件，这会干扰我对“ options”道具的使用。错误如下：
警告：无法道具类型：道具
children在Dropdown道具冲突：options，selection。不能一起定义它们，选择一个或另一个
谢谢，Stackoverflow！
推荐指数
解决办法
查看次数
语义UI滚动段
我正在使用官方UI-ui-react将Semantic UI和ReactJS一起使用。
我想构建一个像Trello这样的应用程序并在上面放卡片。卡片将堆叠一个主题，并且可以在一个主题内垂直滚动，在所有主题上水平滚动。
我使用下面的代码，自然而然地，我得到了堆叠的段，具有大的宽度，没有滚动控件。
import React, { Component } from 'react';
import { Segment, Card, Header } from 'semantic-ui-react';
class TestPanel extends Component {
getCards = () => {
let i = 0;
let cards = [];
for (i = 0; i < 10; i++) {
let card = (
<Card key={i}>
<Card.Header>
Item {i}
</Card.Header>
<Card.Meta>
ItemMeta {i}
</Card.Meta>
</Card>
);
cards.push(card);
}
return cards;
};
render () {
let cards = this.getCards();
return (
<div>
<Segment>
<Segment>
<Header>Segment …推荐指数
解决办法
查看次数
具有语义-ui-react和webpack的图像组件的路径
我正在使用webpack构建ReactJS应用程序.
这个简单的示例应该<img>使用给定的url作为src-attribute 呈现.
如何将图像资源与webpack捆绑在一起并通过适当的加载程序进行处理？我无法弄清楚,为什么图像资源没有被捆绑.
我不包括产生admin.bundle.js这样的<script src="/admin/dist/admin.bundle.js"></script>,因为我不是在谈论PROD环境.我正在使用webpack-dev-server --inline --hot,所以我包括admin.bundle.js这样的:
<script src="http://localhost:8080/admin/dist/admin.bundle.js"></script>完全有效.
import React from 'react';
import { Container, Image } from 'semantic-ui-react';
import MainMenu from './menu/components/MainMenu';
const App = () => (
<Container>
<Image src="/res/img/image.png" />
<MainMenu />
</Container>
);
export default App;
我的(Symfony和ReactJS)项目的目录结构如下(我省略了无关的目录/文件以澄清):
.
??? README.md
??? app
? ??? AppCache.php
? ??? AppKernel.php
? ??? Resources
? ? …推荐指数
解决办法
查看次数
如何在语义-ui-react的输入中添加最大长度？
最大长度不适用于语义 - 反应的输入.
<Input {...input} type={type} size={inputSize} transparent={transparent} disabled={disabled}>
<input data-selector={`${dataSelector}-input`} maxlength="2" />
</Input>
推荐指数
解决办法
查看次数
使用Semantic UI React,如何设置Image Avatar的宽度和高度？
我正在使用:https://react.semantic-ui.com/elements/image#image-example-avatar
<Image avatar width={32} height={32} src={'/xxx.jpg'} />
问题是,Image头像没有使用宽度和高度参数,而是使用指定的CSS:
.ui.avatar.image, .ui.avatar.image img, .ui.avatar.image svg, .ui.avatar.images .image, .ui.avatar.images img, .ui.avatar.images svg {
margin-right: .25em;
display: inline-block;
width: 2em;
height: 2em;
border-radius: 500rem;
}
如何设置使用Semantic UI React的宽度和高度？
谢谢
推荐指数
解决办法
查看次数
在Semantic-UI-React中，是否可以将x图标添加到文本输入或下拉菜单中，以在单击时清除文本？
我同时具有文本输入和允许添加的下拉列表（均使用Form.xxx版本）。对于这两者，我想在右侧添加一个x图标，单击该图标将调用处理程序或清除输入值。
在语义用户界面反应中这可能吗？
谢谢
推荐指数
解决办法
查看次数
如何在语义-UI-React中居中模态？
我是Semantic-UI-React框架的新手,最近遇到了一个我似乎无法解决的问题.我在我的主页上有一个登录和注册模式.触发"登录和注册"按钮后,弹出"模态".但是,我不能让它出现在页面的中心.它位于页面顶部,部分切断.我该怎么做呢？预先感谢您的帮助!
推荐指数
解决办法
查看次数
未加载语义用户界面反应样式
我正在尝试学习对语义ui的反应，但是我对语义ui的样式有疑问。然后，我尝试按照https://react.semantic-ui.com/中的文档进行操作， 但未加载样式
这是我的代码
import React, { Component } from 'react';
import { Table, Icon, Menu, Label } from 'semantic-ui-react';
class App extends Component {
// Here's my other code
render() {
const data = this.state.data
if (this.state.error) {
return (<p>Error : {this.state.error.message}</p>);
} else if (!this.state.isloaded) {
return (<p>Loading ...</p>);
} else {
return (
<Table celled>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Network</Table.HeaderCell>
<Table.HeaderCell>Address</Table.HeaderCell>
<Table.HeaderCell>Balance</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
<Label ribbon>{data.network}</Label>
</Table.Cell>
<Table.Cell>{data.address}</Table.Cell>
<Table.Cell>{data.confirmed}</Table.Cell>
</Table.Row>
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan='3'> …推荐指数
解决办法
查看次数