我没有足够的代表发布图片,但这里是一个链接.
http://i.stack.imgur.com/eTp8Q.png
我在查找适当的CSS/LESS以在Semantic UI框架内启用sidecrolling时遇到了麻烦.网格的这一部分有四列,我需要再添加四列,但是如果有意义的话,将它们隐藏到右边直到滚动到它们.
<div class="features ui grid noMargin">
<div class="four wide column greyOdd">Stuff here</div>
<div class="four wide column greyEven">More stuff</div>
<div class="four wide column greyOdd">Calls n stuff</div>
<div class="four wide column greyEven">Testing look</div>
</div>
如果没有它们进入下一行,我将如何添加更多列？
我试图在Aurelia中使用一个组合框,以便我的用户可以输入下拉列表并搜索内容.我试图合并Semantic创建的那个,但是当我调用该元素的下拉列表时它不会运行代码,因此它保持正常的下拉列表.就像这里的州示例
http://semantic-ui.com/modules/dropdown.html
这样做的最佳方式是什么,有人做过这个,还是想到实现这个功能的好方法？
我正在尝试使用Semantic-UI的固定菜单和侧边栏以及React框架.我希望获得与Semantic-UI的Docs页面(在Tablet和Mobile显示中)相同的结果,顶部有固定菜单,切换时覆盖左侧边栏.
我在这里汇总了一个例子:https: //jsfiddle.net/bullwinkle/m3hr5v36/
它有效,但Semantic-UI不喜欢布局,并在控制台中提供以下错误:
Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusher element
Sidebar: Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag <div class=?"ui inverted left vertical sidebar menu" data-reactid=?".0.0">?…?</div>?
所以语义UI围绕移动布局,使.sidebar和.pusher是直接孩子<body>.这不完全是React的方式.
如下所述:
在将应用程序渲染到正文时,语义UI侧边栏会使用ReactJS抛出控制台错误
您需要为侧边栏定义自定义上下文.好的,所以我在边栏初始化中完成了:
componentDidMount() {
$('.ui.sidebar').sidebar({
transition: 'overlay',
context: $('#layout')
});
},
(参见jsfiddle的第4版,由于低代表我无法发布更多链接)
这修复了错误消息,但现在顶部菜单不再固定,侧边栏与内容一起滚动.我已尽力使Semantic-UI和React很好地发挥,但我显然错过了一些东西
我使用语义ui和angular(1.4)ui来构建应用程序.我遇到这样一种情况:通过角度动态添加类名导致错误的渲染,因为ng-class似乎随意重新排列类名.这是不合需要的,因为语义要求某些类名组合遵循自然/语义顺序.例:
<div class="ui two column grid">
<div ng-class="wideVersion? 'sixteen wide column': 'fourteen wide column'"></div>
</div>
这个结果(当范围变量wideVersion改变时)在dom中:
<div class="ui two column grid">
<div class="wide column fourteen"></div>
</div>
这不起作用,因为语义要求类名遵循此用例中的自然顺序.我尝试了多个ng级变体但结果是一样的.
谢谢
正如标题所示,单选按钮不会检查何时单击标签(tex).然而,这似乎在Semantic的网站上运行良好.
带有工作单选按钮的语义UI文档:http://semantic-ui.com/modules/checkbox.html
以下示例代码直接来自上面的语义UI文档:
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui form">
<div class="grouped fields">
<label>How often do you use checkboxes?</label>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="example2" checked="checked">
<label>Once a week</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="example2">
<label>2-3 times a week</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="example2">
<label>Once a day</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="example2">
<label>Twice a …<div style="overflow-x: scroll">
<table class="ui table">
... table data ...
</table>
</div>
我有一个表中有许多列和行.它溢出页面,当我到达页面/表格的最底部时,我只能水平滚动.
我怎样才能这样做,无论桌子有多"高",我仍然能够在桌面上上下滚动的任何地方水平滚动？
编辑:JSFiddle链接到示例在这里:http://jsfiddle.net/2111sku5/
在JSFiddle中,您可以看到必须一直滚动到表格的底部,以便水平滚动以查看其余的标题.
如何在Semantic UI中连续使用两列,其中一列具有固定宽度,并且不会随着浏览器的大小调整而改变？
我试过这个,但出了点问题:
<div class="ui grid container">
<div class="ui two column divided grid">
<div class="row">
<div class="ui four wide column" style="width= 250px;">
</div>
<div class="ui twelve wide column">
<div class="ui link cards">
<div class="card">
<div class="image">
<img src="./lib/img/elliot.jpg">
</div>
<div class="content">
<div class="header">Matt Giampietro</div>
<div class="meta">
<a>Friends</a>
</div>
<div class="description">
Matthew is an interior designer living in New York.
</div>
</div>
<div class="extra content">
<span class="right floated">
Joined in 2013
</span>
<span>
<i class="user icon"></i>
75 Friends
</span>
</div>
</div> …在我的主要组件中,我可以通过单击图标打开模态.模态的内容是一个单独的组件,它调用一个方法.如果方法调用成功,我想关闭模态.但是我怎么能这样做呢？
主要成分
class Example extends Component {
constructor(props) {
super(props)
this.state = {}
}
render() {
return (
<div>
<Modal trigger={ <Icon name='tags' /> } >
<Modal.Header>
<div>
<Header floated='left'>Title</Header>
<Button floated='right'>A Button</Button>
</div>
</Modal.Header>
<Modal.Content>
<ModalContent />
</Modal.Content>
</Modal>
</div>
)
}
}
模态内容
class ModalContent extends Component {
constructor(props) {
super(props)
this.state = {}
}
handleClick() {
method.call(
{ param },
(error, result) => {
if (result) {
// Now close the modal
}
}
);
}
render() …我正在尝试使用Semantic Ui组件做出反应.但是,我真的很难让主内容组件占据屏幕的全尺寸(见图).我希望主要内容组件能够填满剩下的空间,但似乎它只占用了所需的空间.最终,我希望能够使侧边栏变得粘稠,只滚动主要内容
render() {
const { visible } = this.state
return (
<div>
<Button onClick={this.toggleVisibility}>Toggle Visibility</Button>
<Sidebar.Pushable as={Segment}>
<Sidebar as={Menu} animation='push' width='thin' visible={visible} icon='labeled' vertical inverted>
<Menu.Item name='home'>
<Icon name='home' />
Home
</Menu.Item>
<Menu.Item name='gamepad'>
<Icon name='gamepad' />
Games
</Menu.Item>
<Menu.Item name='camera'>
<Icon name='camera' />
Channels
</Menu.Item>
</Sidebar>
<Sidebar.Pusher>
<Segment basic>
<Header as='h3'>Application Content</Header>
<Image src='/assets/images/wireframe/paragraph.png' />
</Segment>
</Sidebar.Pusher>
</Sidebar.Pushable>
</div>
)
}
我试图将内联样式应用于{height:100%}从层次结构到根组件的所有内容,但似乎没有任何东西可以填充页面的其余部分.我知道这似乎是一个简单的问题,但我被困了哈哈.有任何想法吗？
干杯 希望得到结果
我的应用程序使用Semantic UI React库中的Form.Input 插入日期.它在Chrome和Firefox上都显示了日期选择器,但在Safari上没有.我曾尝试使用react-datepicker库,但它具有不同的样式,很难将其输入与Semantic UI React的Forms中的其他输入对齐.我能做什么？
这是在Safari上不起作用的Form.Input类型的示例.
<Form.Input
label='From'
type='date'
min={this.state.filters.data_inizio}
value={moment(this.state.filters.data_fine).format('YYYY-MM-DD')}
onChange={
(e) => this.setState({
...this.state,
filters: {
...this.state.filters,
data_fine: moment(e.target.value).format('YYYY-MM-DD')
}
}, this.filter)
} />
semantic-ui ×10
css ×4
reactjs ×4
html ×3
javascript ×3
angularjs ×1
aurelia ×1
datepicker ×1
input ×1
jquery ×1
less ×1
ng-class ×1