正文 

当前位置： 首页 > 知识 >

Ant Design TabPane 最小高度 100%

     2023-03-06     57

关键词：

【中文标题】Ant Design TabPane 最小高度 100%【英文标题】：AntDesign TabPane min-height 100% 【发布时间】：2019-12-24 01:44:44 【问题描述】：

使用 Ant.Design 选项卡https://ant.design/components/tabs/

如何在 TabPane 上设置样式，使其最小高度始终为窗口的 100% 高度，即使它是空的？

下面的例子应该用颜色#F5F5F5覆盖窗口

【问题讨论】：

您希望窗口看起来如何？你尝试了什么？您刚刚发布了一个官方示例。 窗口应该在高度上扩展 100%，而不是根据 TabPane 中的内容增加高度。我尝试将 css min-height 应用于 TabPane 并对其应用一个类，但 TabPane 只有在您放入更多内容时才会变得更大。我想让 TabPane 的高度为 100%，无论是否包含内容。 那么为什么是最小高度而不是最大高度？ 【参考方案1】：

这对我有用。

<TabPane tab=tab.title key=index>
<Row>
  <Col style=minHeight: "100vh", maxheight: "100vh">
   Test
  </Col>
</Row>
</TabPane>

【讨论】：

【参考方案2】：

所以这也对我有用

   <Tabs
      onChange=() => 
      console.log("oi");
      
      type="card"
      style= background: "blue", height: "100%" 
   >
   <TabPane
      tab="Tab 1"
      key="1"
      style= minHeight: "100vh", background: "red" 
   >
      Content of Tab Pane 1
   </TabPane>
 </Tabs>

【讨论】：

前端学习（3178）：ant-design介绍1

   查看详情

Ant Design 表格滚动事件

】AntDesign表格滚动事件【英文标题】：AntDesignTableScrollEvent【发布时间】：2019-01-2218:52:40【问题描述】：我用的是antdesigntable，我想固定表格的高度，当数据很大时添加滚动antdtabledemo我希望当用户滚动到表格底部时，从服务器获... 查看详情

ant-design-pro之login组件

1.引入//引入ant-design-proimportLoginfrom‘ant-design-pro/lib/Login‘;/***UserName账号*Password密码*Submit提交*/constUserName,Password,Submit=Login;2.调用(验证) 查看详情

Table - Ant Design - 在 Virtual table ant design 中实现过滤器

】Table-AntDesign-在Virtualtableantdesign中实现过滤器【英文标题】：Table-AntDesign-ImplementfilterinVirtualtableantdesgin【发布时间】：2020-12-0422:24:58【问题描述】：在ant设计的虚拟表中实现过滤器时遇到了一些麻烦。当我在列配置上应用过滤... 查看详情

jeecg/ant-design-vuepro前端使用

1、原生axios使用<script>importVuefrom'vue';importaxiosfrom'axios';axios.defaults.baseURL='http://127.0.0.1:3000/jeecg-boot/sys/annountCement';//Vue.prototype.$http=axios;impor 查看详情

ant-design实现添加页面

1.逻辑代码/***添加用户*/importReact,PureComponentfrom‘react‘importCard,Form,Input,Select,Buttonfrom‘antd‘importconnectfrom‘react-redux‘/***用户列表*/constFormItem=Form.Item;constOption=Select.Option;@Form.c 查看详情

ant design - 大量进口

】antdesign-大量进口【英文标题】：antdesign-hugeimports【发布时间】：2018-07-2103:16:27【问题描述】：我在我的react应用程序中使用antdesignlibrary。而且我面临着大量的导入，这伤害了我的包（由于ant-designlib，目前在缩小版中为1.1mb）... 查看详情

如何在 ant-design react app 中使用 ant-design-pro 组件？

】如何在ant-designreactapp中使用ant-design-pro组件？【英文标题】：Howtouseant-design-procomponentsinant-designreactapp?【发布时间】：2019-10-2214:52:52【问题描述】：我已经使用create-react-app创建了react应用程序并使用了ant-design组件，随着项目变... 查看详情

如何更改步骤颜色（Ant-design）

】如何更改步骤颜色（Ant-design）【英文标题】：HowtochangeStepsColorin(Ant-design)【发布时间】：2019-04-2601:14:17【问题描述】：我是Ant设计的新手。目前我正在研究ReactJs项目，我在我的项目中使用了Steps。我想改变Steps的颜色，但不知... 查看详情

react组件库模板

开源的有蚂蚁金服的：1、https://pro.ant.design/index-cn2、https://pro.ant.design/docs/getting-started-cn3、https://github.com/shengulong/ant-design4、https://ant.design/docs/resource/download-cnreact中午网站：http://reac 查看详情

ant-design-vue：基础使用(代码片段)

一、环境介绍vue3+ts+ant-design-vue二、安装使用2.1、安装脚手架工具$npminstall-g@vue/cli#OR$yarnglobaladd@vue/cli2.2、创建一个demo项目2.2.1、创建项目$vuecreateantd-demo2.2.2、安装成功：2.2.3、项目目录及启动项目：2.2.4、启动... 查看详情

搜索 Ant Design Tree 按标题选择

】搜索AntDesignTree按标题选择【英文标题】：SearchAntDesignTreeSelectbyTitle【发布时间】：2020-02-1807:50:15【问题描述】：默认情况下，Antdesign的Treeselect按值搜索，有没有按标题搜索的方法？我曾尝试使用onSearch函数，但它不会改变TreeSe... 查看详情

ant-design-pro实现二级权限表格

参考技术A场景：需要实现一个可折叠的二级权限表格，勾选全部时，下面的子权限自动勾选；去除子权限的勾选时，父权限的勾选也自动取消。如图：1.主页面2.权限表格数据模型3.权限操作码的枚举 查看详情

ant-design-vue弹窗可拖动(代码片段)

版本： ant-design-vue 1.6.2效果（按住标题栏拖动，拖动超出窗口会自动出现滚动条）：  组件文件结构：index.vue（需要注意的是footer和title的处理，其他的props都是一致的）<template><a-modal:class="[modalClass,simpleClass... 查看详情

ant-design-vue使用问题记录

参考技术A1.使用suffixIcon参数=》slot放在自定义的icon或标签上1.需配合a-layout-sider中collapsible一起使用2.menu中自定义图标收缩显示有问题，还需注意给自定义icon添加class="antion"，不给设置会如图，收缩不全 查看详情

@ant-design/charts 的 Next.js 问题，错误

】@ant-design/charts的Next.js问题，错误【英文标题】：Next.jsproblemwith@ant-design/charts,error【发布时间】：2022-01-1806:37:47【问题描述】：我从事一个大型项目(monorepo)。技术栈是Next、ApolloGraphQL、Ant-Design。我想添加@ant-design/charts包，但它... 查看详情

初识ant-design(代码片段)

设计价值观Ant-Design在设计方面，存在两个大的价值观，自然和确定。自然即顺其自然，在顺应用户的自我感知和行为方式来开发更自然的产品。确定即探索设计规律，并将其抽象成对象，减少设计者的主观干扰，降低系统的不... 查看详情

react使用ant-design组件库

新建项目并引入组件1，全局安装脚手架npminstall-gcreate-react-app2，新建项目create-react-appreactantd3，安装组件npminstallantd--save4，引入组件在需要使用组件的页面进行引入并使用importButtonfrom‘antd/lib/button‘import‘antd/dist/antd.css‘<Butto... 查看详情