天道酬勤,学无止境

How to style a standard GWT component (TabBar) differently?

I am using a TabBar and I want to style the component in different ways. So one time this style, another time that style. I thought this will work but it didn't:

TabBar t = new TabBar();
t.addTab( "1" );
t.addTab( "2" );
t.addStyleName( MyResources.INSTANCE.css().slickTab() );

And:

public interface MyResources extends ClientBundle
{
 public static final MyResources INSTANCE = GWT.create(MyResources.class);
 @Source("style.css") MyCssResource css();
}
public interface MyCssResource extends CssResource
{
 String slickTab();
}

In the CSS

.slickTab .gwt-TabBar .gwt-TabBarItem {
  background-color: #ff0000;
  font-weight: normal;
}

But the appearance don't change. What I am doing wrong?

标签

评论

You might be able to force this in CSS.

.slickTab .gwt-TabBar .gwt-TabBarItem {
    background-color: #ff0000 !important;
    font-weight: normal !important;
}

Also, since you're adding a style which is subject to the parent style. If this is the case, you might need to set 'setStylePrimaryName' instead of adding it and toggle between style changes with handlers.

Change your CSS. .slickTab .gwt-TabBar .gwt-TabBarItem will match a TabBarItem inside a TabBar inside a slickTab. However, since the TabBar is the slickTab, and is not inside it, you need to do something like this (note .gwt-TabBar.slickTab):

.gwt-TabBar.slickTab .gwt-TabBarItem {
    background-color: #ff0000;
    font-weight: normal;
}

The interface MyCssResource need to be inside MyResources.

Here's an exemple :

public interface Resources extends ClientBundle
{
    public static final Resources INSTANCE = 
        GWT.create( Resources.class );

    /***********************************************
     *                    Home
     ***********************************************/
    @Source( "./css/home.css" )
    public HomeCss getHomeCss();

    public interface HomeCss extends CssResource
    {
         String loginBtn();
    }

    /***********************************************
     *                Another Page
     ***********************************************/
    @Source( "./css/AnotherPage.css" )
    public AnotherPage getAnotherPageCss();

    public interface AnotherPage extends CssResource
    {
         String title();
    }
}

This is the way I use all kind of Resource and it work really well.
Whenever you need to use it many time in the same method or function, you can do this :

HomeCss homeStyle = Resource.INSTANCE.getHomeCss();
yourPanel.setStyleName( homeStyle.yourPanel() );

Don't hesitate to ask if there's anything you didn't understand.

.slickTab .gwt-TabBar .gwt-TabBarItem is going to match something with class gwt-TabBarItem inside something with class gwt-TabBar inside something with class slickTab. I think you just want .slickTab .gwt-TabBarItem for the CSS selector.

I highly recommend using FireBug to inspect the HTML structure generated by GWT and how your CSS selectors are applied to it.

The line:

t.addStyleName( MyResources.INSTANCE.css().slickTab() );

Modifies the class element attribute. And INSTANCE.css().slickTab() does not do what you think. These methods without annotations bring back to java the @def's in the css. To make what you want add to MyCssResource:

@ClassName("slickTab")
String slickTab();

So, when GWT garbles the css upside down that method will return the corect class, ej "awEs". These GWT guys are obsessive about squeezing stuff :)

And remember, firebug & chrome-inspector are your friends.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • GWT 和 Vaadin 之间的差异(Differences between GWT and Vaadin)
    问题 谁能建议“GWT”或“Vaadin”是设计应用程序的更好选择吗? 另外:编码风格有什么区别? 回答1 在 GWT 中,应用程序逻辑通常在客户端运行。 它只在需要读取/保存一些数据时调用服务器。 在 Vaadin 中,应用程序逻辑在服务器端。 客户端通常必须在每次用户交互后调用服务器。 GWT优势: 应用程序逻辑(对用户交互的回复)速度更快,因为它在浏览器中本地运行。 它对不良网络条件也相对不敏感。 网络仅在需要时使用(读取/保存新数据),从而节省网络流量(对于高流量站点很重要)。 在这方面,Vaadin 速度较慢,并且会在 UI 交互中引入延迟,这让用户感到厌烦。 如果网络不好,这将显示在 UI 响应中。 瓦丁优势: 应用程序逻辑在服务器上运行,因此用户无法对其进行检查。 可以说(Vaadin 声称)这使它更安全。 回答2 还有几点: 一个根本的区别是在 GWT 中你必须将你的应用程序分成客户端和服务器代码,而在 Vaadin 中没有这样的区别。 这将影响您的应用程序的架构。 在 GWT 客户端代码中,您必须使用 Java 进行编码,并且拥有有限的语言特性子集(GWT 编译器可以将这些特性转换为 Javascript)。 在 Vaadin 中,您可以使用任何 JVM 语言进行编码,因为一切都在服务器中运行(我将 Vaadin 与 Scala 结合使用)。 这可能与您相关
  • 替代GWT样式(Override GWT Styling)
    问题 我有一个漂亮的纯HTML样机,用于我现在正在GWT中重新创建的网页。 我正在尝试在我的GWT应用程序中使用相同的CSS,但这对我来说效果不佳。 GWT样式似乎覆盖了我的样式。 我知道我可以完全禁用GWT样式,但是我希望对要添加的GWT组件(选项卡面板,按钮等)进行样式设置。 有没有一种方法可以禁用GWT样式,而仅对我选择的组件启用它? 回答1 嗯,我设法通过继承我的项目的首要标准CSS规则来解决问题.css文件中.gwt.xml我的项目文件。 当您以这种方式设置用户定义的.css (在通常的继承行之后),在层叠一个规则时,它比在标准gwt样式表中定义的相同规则具有更高的优先级。 花了几个小时才弄清楚如何正确继承它,因为在第一次尝试中只需键入<stylesheet src='WebTerminal.css' /&gt ;即可。 在我的.gwt.xml文件中并注释掉.html宿主页中的<link type="text/css" rel="stylesheet" href="WebTerminal.css">并没有给我带来任何结果。 因此,解决方案是在.gwt.xml配置中设置.css时使用相对路径,如下所示: <stylesheet src='../WebTerminal.css' /> 注意../在我的相对路径的开头。 要弄清楚它是如何工作的,请添加Window.alert
  • 从0开始认识uniapp
    前言 - uniapp在官网上面介绍的很详细,从搭建到使用,本篇文章是基于官网,在结合自身的进行的一个大致的总结,是一些在一个项目中必然会用到的知识点,相对于官网更加简单 主要是 - uniap的介绍,创建,配置,scss/less的使用, 生命周期,跳转等,页面间传值,存储,数据请求及其封装,如果是有vue的基础,基本掌握以上知识点就可以开发一个uniapp的项目了,但是值得注意的是uniapp 的开发中有许多小坑,需要边做边发现,不同的终端设备,会有不同的问题,因此真正做到多用还是需要花很多时间去解决一些某一端出现的问题,欢迎和我一起讨论哦 1.什么是uniapp? 学习任何一门新的技术,都离不开官网,所以上链接 - https://uniapp.dcloud.io/README 在官网介绍的很详细了, uniapp是一个使用 Vue.js 开发所有前端应用的框架,简单的来说就是写一套代码,可以打包为APP, Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等 只有会偷懒的程序员才是好程序员,把一个功能从N句代码变为1句代码,2句代码的时候,应该就是逐渐步入大神的时候了,对于uniapp开发,如果是有vue基础和微信小程序开发经验可以快速上手 2.uniapp使用什么开发工具? uniapp的首选工具是HbuilderX,在官网的介绍中说了
  • 微信小程序
    微信小程序 准备工作 注册小程序帐号 ① 准备一个微信号(你如果还没有微信号,你out了,你是穿越来的吧) ② 申请小程序账号:https://mp.weixin.qq.com/wxopen/waregister?action=step1 获取开发密钥(appId) 在做项目时需要密钥 公众平台登录小程序->开发->开发设置->AppID(小程序ID) 安装开发工具 开发工具,可以选择自己喜欢的,也可以选择微信工具,下载微信开发工具,微信开发工具可完成开发,调试,打包,部署的工作 目录结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 默认的目录结构: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zqqkdD5X-1617698618518)(C:\Users\31759\AppData\Roaming\Typora\typora-user-images\1599034334559.png)] 1、全局文件 ​ app开头的文件名是全局文件(文件名不能),包括app.js、app.json、app.wxss。 ​ app.js:是全局的js文件,里面的变量可以在任何地方使用。 ​ app.json:是对小程序的全局配置。 ​ app.wxss:是全局样式。 2、页面级文件(pages文件夹下) ​ 如:pages
  • uniapp开发注意事项
    1.static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。 2.css、less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。 3.template内引入静态资源,如image、video等标签的src属性时,可以使用相对路径或者绝对路径。 4.js文件不支持使用/开头的方式引入。 5.css文件或style标签内引入css文件时(scss、less文件同理),只能使用相对路径。 6.编译期判断环境可用条件编译,运行期判断可用uni.getSystemInfoSync().platform判断环境。 7.在字体或高度中使用了 rpx ,那么需注意这样的写法意味着随着屏幕变宽,字体会变大、高度会变大。如果你需要固定高度,则应该使用 px 。 8.App端,在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位,只支持 px,不支持 rpx。 9.小程序不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。 10.背景图片微信小程序不支持相对路径(真机不支持,开发工具支持)。 11.字体图标网络路径必须加协议头 https。 12.非 H5 端不支持使用含有 dom、window 等操作的 vue
  • 微信小程序
    微信小程序 准备工作 注册小程序帐号 ① 准备一个微信号(你如果还没有微信号,你out了,你是穿越来的吧) ② 申请小程序账号:https://mp.weixin.qq.com/wxopen/waregister?action=step1 获取开发密钥(appId) 在做项目时需要密钥 公众平台登录小程序->开发->开发设置->AppID(小程序ID) wx1481c0459dc80dab 安装开发工具 开发工具,可以选择自己喜欢的,也可以选择微信工具,下载微信开发工具,微信开发工具可完成开发,调试,打包,部署的工作 目录结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 默认的目录结构: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4B3U47ps-1617707135710)(C:\Users\31759\AppData\Roaming\Typora\typora-user-images\1599034334559.png)] 1、全局文件 ​ app开头的文件名是全局文件(文件名不能),包括app.js、app.json、app.wxss。 ​ app.js:是全局的js文件,里面的变量可以在任何地方使用。 ​ app.json:是对小程序的全局配置。 ​ app.wxss:是全局样式。 2、页面级文件
  • 微信小程序常见面试题总结
    1.阐述一下微信公众平台账号的分类? 微信公众账号分为订阅号、服务号、小程序(含小游戏)、企业微信(原企业号) 2.阐述一下不同公众账号的特点? 订阅号: 为媒体和个人提供一种新的信息传播方式,主要功能是在微信侧给用户传达资讯。一天群发1次,显示在订阅号文件内,高级接口有限制 服务号: 为企业和组织提供更强大的业务服务与用户管理能力,主要偏向服务类交互。不适合个人。每月群发4次,能够使用高级接口。 企业微信: 企业的专业办公管理工具。与微信一致的沟通体验,提供丰富免费的办公应用,并与微信消息、小程序、微信支付等互通,助力企业高效办公和管理。 小程序: 小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。 3.阐述一下微信小程序的优劣势? ●优点 1)开发成本跟H5差不多,相对来说开发成本比APP要低。 2)运行速度跟APP差不多,也能做出很多H5不做到的功能,例如GPS定位、录音、拍视频、重力感应等 3)主要的样式代码都封装在微信小程序里面,所以打开速度比普通的H5要快,接近原生APP。 4)对用户使用上来说,确实方便,要用的时候打开,不用的时候关掉,即用即走。这点比需要下载,还要占用手机内存空间的APP要好。 5)开发难度较低 ●缺点 1)目前小程序文件不能超过2M的大小,限制了很多大型的小程序开发,所以
  • 如何为DataGrid标头覆盖GWT混淆样式(How to override GWT obfuscated style for DataGrid header)
    问题 我试图弄清楚如何重写DataGrid.css中定义的dataGridHeader样式! GWT核心。 GWT样式名称已被adler32混淆,因此我不能在CSS中简单地使用.dataGridHeader。 在我的情况下,我希望对white-space:normal进行简单的更改。 我在这里看到过有关注入css的文章,但它们似乎都是类级别的,而不是像DataGrid这样的组件中使用的子样式。 如何覆盖在DataGrid之类的组件中使用的标题样式? 回答1 就像使用任何ClientBundle和CssResource :创建一个扩展Datagrid.Resources的接口,并使用指向您自己的CSS文件(或可能同时指向原始文件和您自己的文件)的@Source注释覆盖dataGridStyle方法。结合在一起)。 那样做会覆盖应用程序中所有DataGrid的样式(实际上,它取决于哪个CssResource实例首先获取ensureInjected() :来自原始DataGrid.Resources那个或来自子接口的那个):因为您如果使用相同的返回类型( DataGrid.Style ),则混淆的类名称将相同。 如果要逐个更改样式,则还需要声明一个扩展DataGrid.Style的接口,并使用该接口作为dataGridStyle覆盖的返回类型
  • 微信小程序知识点汇总---更新中
    微信公众平台 是基于微信公众号,为微信用户提供服务的平台 微信公众平台开发:是基于微信内进行的公众号业务开发; 前端程序员是公众平台开发的主力军 平台登录地址:https://mp.weixin.qq.com 微信公众平台的账号分类 公众号 订阅号 偏于为用户传达资讯(类似报纸杂志) 服务号 偏于服务交互(类似银行、114),提供更多的服务,例如开通微信支付 小程序 一种新的开放能力,具有类似于手机App的使用体验 企业微信(原企业号) 企业的专业办公管理工具,用于企业员工内部通讯、打卡、审批等 小程序 小程序:基于微信提供的API进行开发 官网申请开发者账号的教程: https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18101214 组件 组件是视图层的基本组成单元 组件以UI结构布局为主,一般不需要处理业务逻辑 一个组件通常包括 开始标签 和 结束标签,属性 用来修饰这个组件,内容 在两个标签之内 注意:所有 组件名称 与 属性名称 都是小写 API API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数。 API 以纯业务逻辑为主,一般没有对应的UI结构 API 的三种分类: 事件监听 API 特点:这类 API 以 on
  • uniapp开发必须了解的知识
    有学过微信小程序开发和vue的,uniapp开发成本低,但是还是不能忽视了注意事项,别给自己带来麻烦,以下是我从官网上抽取的,希望接下来的开发能够顺利进行,文字有点多,但细看益处多多,go~~~ 开发工具下载标准版,在运行或发行uni-app时,会提示安装uni-app插件 下载App开发版,可开箱即用如使用cli方式创建项目,可直接下载标准版,因为uni-app编译插件被安装到项目下了。 可以通过 vue-cli 创建 uni-app 项目。接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期为兼容多端运行,建议使用flex布局进行开发static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。css、less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。生命周期函数onUniNViewMessage 对 nvue 页面发送的数据进行监听onlaunch里进行页面跳转,如遇白屏报错,请参考https://ask.dcloud.net.cn/article/35942 页面生命周期:onResize 监听窗口尺寸变化 5+App
  • 小程序之组件和API总结
    小程序之组件和API总结 文章目录 小程序之组件和API总结前言一、组件1.1 视图容器1.1.1 普通视图容器 `view`1.1.2 可滚动的视图容器 `scroll-view`1.1.3 轮播图容器组件和轮播图item组件 `swiper 和 swiper-item`在<swiper-item>中可以包含文本或图片, 其宽/高默认为 100% 。 1.2 基础内容1.2.1 文本组件,类似于HTML中的span `text`1.2.2 富文本组件,支持把 HTML 字符串渲染为 WXML 结构 `rich-text`1、HTML String方式渲染2、节点方式渲染`元素节点``文本节点` 1.3 表单组件1.3.1 按钮组件 `button` 1.4 导航组件 `navigator`1.4.1 声明式导航导航到 tabBar 页面 `...`url的写法是/pages加目标文件夹加文件加文件夹名字 `从mine页面导航到score页面应该这样写 /pages/score/score` 导航到非tabBar 页面 `...`后退导航(后退上一级省略delta) `...` 1.4.2 编程式导航导航到 tabBar 页面 `wx.switchTab(object)`导航到 非tabBar 页面 ` wx.navigateTo(object)`后退导航 `wx
  • gwtQuery 的好处(benefits of gwtQuery)
    问题 有人可以告诉我使用 gwt 查询有什么好处吗?它只是用于 css 效果吗? 以及我们如何使用它来创建像 gwt 这样的 ui 元素。 我所理解的只是在项目中使用标签,文本框,按钮等gwt组件,然后gwt查询只是对该组件产生一些影响,是这样吗? 如果是用于 css 效果,那么我们也可以在 gwt 中做同样的事情,那么为什么我会使用 Gwtquery 而不是 gwt。 有人可以帮我.. 谢谢, 回答1 GQuery 远不止这些。 例如,您可以快速轻松地导航到 de DOM(如 jQuery)! 看,今天早上我是这样用的: Element p = DOM.createElement("p"); p.addClassName("KV"); p.setInnerText(newBody); $(cellList + " #__idx=\""+position+"\" p .KV").replaceWith(p); 如果您查看最后一行,您将看到:小部件cellList的相关 DOM(来自 MGWT 的 CellList),搜索具有 id "__idx"的元素,然后选择元素p并从中选择具有该类的元素"KV" 。 你有没有想过这个普通gwt的代码? 您可以使用的其他真正有用的东西是 Promise 模式。 就像如果 B 正确完成就做 A,如果 C 正确完成就做 B。
  • 小程序开发
    小程序布局与普通Web开发差异 小程序的设计稿通常是按照iPhone6 宽度一般韦750 的尺寸设计的小程序代码是真的h5代码吗?小程序当然不是H5,它也不用html写,使用WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 小程序样式导入 使用@import语句可以导入外联样式表,只支持相对路径 例如:@import "/public/css/style.wxss"; 行内样式 <view style="color: {{index===1? 'red' : ''}}"</view> 小程序支持的选择器类型 小程序插值表达式写法 插件表达式 <view class="{{index == 0 ? 'getFocus' : 'lostFocus'}}">常用</view> 小程序事件机制 绑定事件格式:bind+事件名 例如:<button bindtap="要触发的方法"> 传参问题:小程序主要通过自定义属性来传参 wxml: <button bindtap="del" data-idx="{{index}}">X</button> js: //用e.currentTarget.dataset来接收视图传递过来的自定义属性值 del(e) { let {idx}=e.currentTarget
  • 微信小程序ColorUI使用自定义tabbar
    原本直接使用demo里的tabbar,发现渲染出来的页面都是component形式的,无法使用Page里的一些事件方法,所以打算使用自定义tabbar改写,这其中又出现了一些问题,和大家分享一下。 自定义tabbar 这部分根据官方文档,把tabbar的内容拷过来就可以了。 官方链接: 自定义 tabBar. 样式丢失 随后发现样式丢失,在index.wxss文件中重新引用样式表。 @import "../colorui/main.wxss"; @import "../colorui/icon.wxss"; 这时候发现大部分样式已经好了,其中还有一些不起作用,比如颜色之类的,再根据自己的需要手动添加,如: .bg-white { background-color: #ffffff; color: #666666; } .text-green, .line-green, .lines-green { color: #39b54a; } 切换出错 样式调好了之后,点击切换,发现字体颜色乱跳,查了相关文档发现每个 tab 页下的自定义 tabBar 组件实例是不同的。 这就意味着我单纯的通过在tabbar里js中一个selected变量是判断不出在哪个页面的,只能在进入某个页面时对其进行修改。 tabbar的wxml文件 参照了网上的资料,实现如下:
  • 如何高效的阅读uni-app框架?(建议收藏)
    作者 | Jeskson来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js。脚本,应用程序,main.js。日志打印,定时器,生命周期,页面,页面通讯。 pages.json文件时用来对uni-app进行全局配置的,它是用来写页面文件的路径,窗口样式,底部的tabbar等,类似于小程序中的app.json的页面管理。这里注意的是定位,在小程序中是在app.json的,而在uni-app中式在manifest配置的,这一点是我做地图时注意到的内容。 pages.json: { "pages": [{ "path": "pages/component/index", "style": { "navigationBarTitleText": "组件" } }, { "path": "pages/API/index", "style": { "navigationBarTitleText": "接口" } }, { "path": "pages/component/view/index", "style": { "navigationBarTitleText": "view" } }], "condition": { //模式配置,仅开发期间生效 "current": 0, /
  • 微信小程序的常见的面试题(总结)
    1、微信小程序有几个文件 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。内部主要是微信自己定义的一套组件WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式js逻辑处理,网络请求json小程序设置,如页面注册,页面标题及tabBar 2、微信小程序怎样跟事件传值 给 HTML 元素添加 data-*属性来传递我们需要的值,然后通过 e.currentTarget.dataset 或 onload的 param参数获取。但 data -名称不能有大写字母和不可以存放对象 3、小程序的 wxss 和 css 有哪些不一样的地方? wxss的图片引入需使用外链地址没有 Body;样式可直接使用 import 导入 4、小程序关联微信公众号如何确定用户的唯一性 使用 wx.getUserInfo方法 withCredentials 为 true 时 可获取 <encryptedData,里面有 union_id。后端需要进行对称解密 5、微信小程序与vue区别 生命周期不一样,微信小程序生命周期比较简单数据绑定也不同,微信小程序数据绑定需要使用{{}},vue 直接:就可以 显示与隐藏元素,vue中,使用 v-if和 v-show控制元素的显示和隐藏,小程序中
  • 前端微信小程序常见面试题
    1、微信小程序有几个文件 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。内部主要是微信自己定义的一套组件WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式js逻辑处理,网络请求json小程序设置,如页面注册,页面标题及tabBar 2、微信小程序怎样跟事件传值 给 HTML 元素添加 data-*属性来传递我们需要的值,然后通过 e.currentTarget.dataset 或 onload的 param参数获取。但 data -名称不能有大写字母和不可以存放对象 3、小程序的 wxss 和 css 有哪些不一样的地方? wxss的图片引入需使用外链地址没有 Body;样式可直接使用 import 导入 4、小程序关联微信公众号如何确定用户的唯一性 使用 wx.getUserInfo方法 withCredentials 为 true 时 可获取 <encryptedData,里面有 union_id。后端需要进行对称解密 5、微信小程序与vue区别 生命周期不一样,微信小程序生命周期比较简单数据绑定也不同,微信小程序数据绑定需要使用{{}},vue 直接:就可以 显示与隐藏元素,vue中,使用 v-if和 v-show控制元素的显示和隐藏,小程序中
  • Flutter学习笔记(17)--顶部导航TabBar、TabBarView、DefaultTabController
    如需转载,请注明出处:Flutter学习笔记(17)--顶部导航TabBar、TabBarView、DefaultTabController 上一篇我们说了BottmNavigationBar底部导航组件,今天来学习一下顶部导航组件TabBar,TabBar选项卡一般位于AppBar下方,通常和TabBar(顶部导航选项卡)一起使用的有TabBarView和TabController。 TabBar:Tab页的选项组件,默认为水平排列。 TabBarView:Tab页的内容容器,Tab页内容一般处理为随选项卡的改变而改变。 TabController:TabBar和TabBarView的控制器,它是关联这两个组件的桥梁。 TabBar组件常见属性 属性名类型说明isScrollablebool是否可以水平移动tabsList<Widget>Tab选项列表 Tab组件常见属性 属性名类型说明iconWidgetTab图标textStringTab文本 TabBarView组件常见属性 属性名类型说明controllerTabController指定视图的控制器childrenList<Widget>视图组件的child为一个列表,一个选项卡对应一个视图 上面我们说的TabController,与其并列的还有DefaultTabController
  • (小程序taro框架入门到实战)一、taro框架安装及项目搭建
    一、安装及案例使用 1.安装全局配置 >cnpm install -g @tarojs/cli 2.搭建项目 >taro init 项目名 3.安装成功提示 说明:安装过程中会出现依赖安装报错问题【没翻墙】,需要进入项目目录用cnpm install来完成安装 4.运行体验【微信小程序举例】 >cnpm run dev:weapp --watch // 说明:--watch会 5.下载小程序开发者工具,导入目录下的dist文件 6.效果展示 二、构建页面及配置相关文件,解决bug 说明:通过快捷命令构建新的页面 >taro create --name mine // mine是文件名 1.修改配置文件,声明构建的新页面(src目录下app.config.ts) 2.小程序端效果展示 3.配置顶部导航 效果展示: 4.补充说明 命令生成的文件,需要引入React 5.编译之后存在bug Error: 未找到入口 sitemap.json 文件,或者文件读取失败,请检查后重新编译。 解决方案: 1)在src目录下添加sitemap.json。 说明:该段代码,从其他原生小程序开发中copy而来的。 2)配置文件下修改配置:【复制开发过程的sitemap.json文件到dist下】 from: `src/sitemap.json`, to:`dist/sitemap.json` 3
  • 【uniapp开发从0开始做一个小程序-03(主界面)】
    【uniapp开发从0开始做一个小程序-03(主界面)】 之前我们学习了几个简单的元素使用方法,现在我们正式进入小程序页面的制作中。 首先是将之前在index.vue和index.css写的代码删掉或者注释掉,或者新建一个页面(我是注释一部分,删除一部分) 目录 导入colorui框架完成5个页面的新建和路由的认知替换图标,设置下方导航栏 导入colorui框架 Colorui是一个写好了的uniapp样式框架,比如说我们有一个毛坯房,colorui相当于做好了的门、窗、家居,在装修房子的时候直接放进房子里,自己选好位置和样式,就能得到好看的精装房 1-1:百度搜索uniapp官网 1-2:点击插件市场 1-3:搜索colorui 1-4:翻到第二页的colorui组件库 1-5:点击名字后打开网页,然后点击下载zip 1-6:下载完成后,解压 1-7:点击文件->导入->从本地导入 1-8:找到解压后的文件夹,选择确定 1-9:此时我们的项目管理器中就会出现colorui的文件 1-10:我们点击运行到chorm浏览器,就会出现各种元素、插件和扩展组件的样式成果。 我运行的时候报了两个找不到图片的错误,都是背景图片,问题不大。 1-11:在我们创建的项目下创建utils文件夹,utils是工具文件夹的意思 1-12:将组件里的colorui文件夹整个复制 1-13