最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】AdminLTE中如何实现可以点击关掉的tag标签

AdminLTE crifan 3567浏览 0评论

折腾:

【记录】用AdminLTE实现报表的原型

期间,需要去找:

AdminLTE中的标签,且右边带x,可以点击关掉的。

Adminlte的tag 且代x点击关掉的。

adminlte tag closable

Tag Inputs for AdminLTE · Issue #782 · almasaeed2010/AdminLTE

Integrating with Bootstrap – ngTagsInput

AdminLTE 2 | Advanced form elements

Bootstrap Tags Input

这个是我要的

html – AdminLTE collapsed boxes by default – Stack Overflow

不过,此处用:

<!– Main content –>
<section class=”content”>
<div className=”row”>
<div class=”col-lg-4″ style=”width: 300px;”>
<div class=”box”>
<div class=”box-header”>
<h3 class=”box-title”>东南大区 > 上海商务处</h3>
<div class=”box-tools pull-right”>
<button type=”button” class=”btn btn-box-tool” data-widget=”remove” data-toggle=”tooltip” title=”Remove”>
<i class=”fa fa-times”></i></button>
</div>
</div>
</div>
</div>
<div class=”col-lg-4″ style=”width: 150px;”>
<div class=”box”>
<div class=”box-header with-border”>
<h3 class=”box-title”>明锐</h3>
<div class=”box-tools pull-right”>
<button type=”button” class=”btn btn-box-tool” data-widget=”remove” data-toggle=”tooltip” title=”Remove”>
<i class=”fa fa-times”></i></button>
</div>
</div>
</div>
</div>
<div class=”col-lg-4″ style=”width: 150px;”>
<div class=”box”>
<div class=”box-header with-border”>
<h3 class=”box-title”>DCC</h3>
<div class=”box-tools pull-right”>
<button type=”button” class=”btn btn-box-tool” data-widget=”remove” data-toggle=”tooltip” title=”Remove”>
<i class=”fa fa-times”></i></button>
</div>
</div>
</div>
</div>
</div>
</section>
<!– /.content –>
</div>
<!– /.content-wrapper –>

基本上实现了所要的效果:

但是想要去掉顶部的灰色

所以去搜:

adminlte box without border

Using boxes with and without solid header breaks responsive layout · Issue #432 · almasaeed2010/AdminLTE

Box containers beark responsive elments sequnce · Issue #437 · almasaeed2010/AdminLTE

然后去看官网的demo:

AdminLTE 2 | Widgets

看到的是box-solid:

用:

<div class=”box box-solid”>

即可去掉顶部的灰色:

然后再去加上背景色。

最后用:

<div className=”row”>
<div class=”col-lg-4″ style=”width: 260px;”>
<div class=”box box-solid box-primary”>
<div class=”box-header”>
<h3 class=”box-title”>东南大区 > 上海商务处</h3>
<div class=”box-tools pull-right”>
<button type=”button” class=”btn btn-box-tool” data-widget=”remove” data-toggle=”tooltip” title=”Remove”>
<i class=”fa fa-times”></i></button>
</div>
</div>
</div>
</div>
<div class=”col-lg-4″ style=”width: 120px;”>
<div class=”box box-solid box-primary”>
<div class=”box-header”>
<h3 class=”box-title”>明锐</h3>
<div class=”box-tools pull-right”>
<button type=”button” class=”btn btn-box-tool” data-widget=”remove” data-toggle=”tooltip” title=”Remove”>
<i class=”fa fa-times”></i></button>
</div>
</div>
</div>
</div>
<div class=”col-lg-4″ style=”width: 120px;”>
<div class=”box box-solid box-primary”>
<div class=”box-header”>
<h3 class=”box-title”>DCC</h3>
<div class=”box-tools pull-right”>
<button type=”button” class=”btn btn-box-tool” data-widget=”remove” data-toggle=”tooltip” title=”Remove”>
<i class=”fa fa-times”></i></button>
</div>
</div>
</div>
</div>
</div>

效果:

其中:

box-primary可以换成:

box-info

box-warning

box-danger

则是其他颜色。

后续有空再去折腾用上面的那个tag:

Bootstrap Tags Input

刚才简单的试了试:

<div className=”row”>
<div class=”col-lg-12″>
<input type=”text” value=”东南大区 > 上海商务处,明锐,DCC” data-role=”tagsinput” />
</div>

效果是:

所以根本都无法显示全。

去加了style宽度:

style=”width: 300px;”

也没用。

所以以后有空再去试试了。

转载请注明:在路上 » 【已解决】AdminLTE中如何实现可以点击关掉的tag标签

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
83 queries in 0.163 seconds, using 22.14MB memory