- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我克隆了 stencil-component-starter
来自:
https://github.com/ionic-team/stencil-component-starter
然后在文件上:my-component.tsx
我有以下代码:
import { Component, Prop } from '@stencil/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() last: string;
@Prop() minHeartRate: number;
@Prop() maxHeartRate: number;
render() {
return (
<div>
Athlete: {this.first} {this.last} - Heart Rate Range:
<ion-range mode="ios" dualKnobs={true} min={0} max={200} step={2} pin={true} snaps={true} value={{lower: this.minHeartRate, upper: this.maxHeartRate}}>
<ion-label range-left>0</ion-label>
<ion-label range-right>200</ion-label>
</ion-range>
</div>
);
}
}
如你所见:
[Before] 它被几乎正确渲染,但有两个问题 1 and 2
:
[现在] 它根本没有被渲染。因此,存在三个问题 1, 2 and 3
:
<ion-label/>
标记被忽略。
每个旋钮都可以移动到另一个旋钮之外(请忽略这一点,我认为这是新版本的目的)。
这是我刚刚检测到的新问题 (Current time: 2018-08-26 19:20)
.就像 12 小时前(检查 repo 上的时间戳)存储库:https://github.com/napolev/stencil-ion-range/提交 12c14b75cca92f19af6c5ccae60091319578cec7
正在几乎正确生成<ion-range/>
上面的标签,问题 1 和 2 除外(检查下图)。但是现在,在全新安装此存储库后,它不再呈现您在下图中看到的内容。这很奇怪。完成该提交后,我检查了它是否在全新安装后呈现了该内容。
这是它之前渲染的内容,现在不再渲染了:
引用:
https://ionicframework.com/docs/api/components/range/Range/
关于如何解决这个问题有什么想法吗?
谢谢!
[编辑 1]
这是对下面 Aaron Saunders 评论的回应:
ion-label component inside the stencil-component-starter not getting rendered
Aaron,我添加了您建议的代码,您可以在此处看到:
但是当运行代码时:$ npm start
以下是渲染的内容:
您是否正确渲染了组件?
我删除了 node_modules
目录并再次安装它们但没有成功。
你能试试我的存储库吗?
如您所见,我在官方提交之上仅完成了 2 次提交:
https://github.com/napolev/stencil-ion-range/commits/master
为了以防万一,这里是我用于主要工具的版本:
$ node -v
v8.11.2
$ npm -v
6.1.0
$ ionic -v
ionic CLI 4.1.1
[编辑 2]
此主题有一个并行讨论:
[编辑 3]
这是对下面 Alexander Staroselsky 评论的回应:
ion-label component inside the stencil-component-starter not getting rendered
Alexander,我尝试了您的建议并做了以下更改:
https://github.com/napolev/stencil-ion-range/commit/68fce2abe25536b657f9493beb1cc56e26828e4f
现在 <ion-range/>
组件被渲染(这真的很好)但是渲染存在一些问题,如下图所示。 <ion-label/>
组件的宽度很大。
关于如何解决这个问题有什么想法吗?
谢谢!
[编辑 4]
添加 Aaron Saunders 的建议就可以了:
<ion-item>
<ion-range
mode="ios"
dualKnobs={true}
min={0} max={200} step={2}
pin={true} snaps={true}
value={{ lower: this.minHeartRate, upper: this.maxHeartRate }}
>
<ion-label slot="start" style={{flex: 'none', margin: '0 30px 0 0'}}>0</ion-label>
<ion-label slot="end" style={{flex: 'none', padding:' 0 0 0 30px'}}>200</ion-label>
</ion-range>
</ion-item>
感谢 Alexander Staroselsky 和 Aaron Saunders 因为结合他们的建议我可以完成这项工作。
最佳答案
您需要在 stencil-component-starter 中显式 import '@ionic/core';
组件或添加 CDN scripts/styles到 index.html
。我记得有一次,工具包或 stencil-app-starter 专门在根元素中导入了早期版本的 @ionic/core beta 甚至是 alpha。
此外,根据 documentation ,您还需要使用 ion-item
包装 ion-range
以及使用 slot="start"
和 slot ="end"
而不是 range-left
和 range-right
。
import { Component, Prop } from '@stencil/core';
import '@ionic/core';
@Component({
tag: 'my-component',
styleUrl: 'my-component.css',
shadow: true
})
export class MyComponent {
@Prop() first: string;
@Prop() last: string;
@Prop() minHeartRate: number;
@Prop() maxHeartRate: number;
render() {
return (
<div>
Athlete: {this.first} {this.last} - Heart Rate Range:
<ion-item>
<ion-range mode="ios" dualKnobs={true} min={0} max={200} step={2} pin={true} snaps={true} value={{lower: this.minHeartRate, upper: this.maxHeartRate}}>
<ion-label slot="start">0</ion-label>
<ion-label slot="end">200</ion-label>
</ion-range>
</ion-item>
</div>
);
}
}
这将有助于确保注入(inject)样式并正确呈现组件。平心而论,当我尝试这样做时,大多数样式都通过了,但是开槽 ion-label
元素的定位肯定存在问题。肯定需要对样式进行一些调整,包括 flex grow/shrink/basis 以及 end slot 元素的定位/margin。在@ionic/core github 上提交样式问题可能是明智的。
希望对您有所帮助!
关于typescript - stencil-component-starter 中的 ion-label 组件没有被渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52024158/
我有以下代码。我无法理解应如何实现 ProjectCardDescription 组件,以便能够在 ProjectCard 组件中传递其描述 我尝试过这个,但得到一个空组件: import React
我们正试图从 styled-components 项目中找出以下问题的原因:https://github.com/styled-components/styled-components/issues/
将所有文件从 jsx 更改为 tsx 后,出现此错误: ./src/components/index.js Module not found: Can't resolve './Header' in
我正在努力遵循以下 vuejs 应用场景动态组件 + 异步组件模式。一切正常,但仍然只有一个问题:我怎样才能访问通过传入的 Prop 数据 请看现场 fiddle : https://jsfiddl
我已经明白了Difference between React Component and React Element , 使用 JSX 基本上调用 React.createElement它返回一个元素
我最近开始使用 JSX 元素语法而不是调用函数,因为它使代码更漂亮。但看起来又不太一样。令人惊讶的是,因为在 App.js 中,函数调用会导致无限循环(并引发错误),但 JSX 元素可以工作。在 Da
通过少量渲染来构建嵌套组件系统的好方法是什么?请参阅下面带有主要问题(“如何...”)的所需代码: tab.vue(子组件) export default {
我正在编写一个轻量级游戏引擎,并且在为它做一些研究的同时,我遇到了许多令人信服的文章,它们提倡通过“组件集合”模型而不是“从具体类继承”模型来实现游戏对象。有很多优点: 可以使用数据组合对象 驱动设计
类型‘AbstractControl’上不存在属性‘Controls’。
考虑以下示例: function Travel(props) { return ( ) } function Welcom
我刚刚加入了一个 React Native 项目,在那里我经常看到扩展 React.Component 和 Component 本身的类。 示例: 类 SomeView 扩展了 React.Compo
我见过两种访问 Component 的方法: import React from 'react'; class Foo extends React.Component { ... } 和 im
我有一个库 jar,我想将其提供给许多应用程序。我想要的行为是在库中创建一个通用的 spring 组件类。如果在应用程序中,没有扩展相同的组件,则使用公共(public)组件;如果它在应用程序中扩展,
所以我正在制作一个游戏,我有 EnemyAI 以及 player,它们都扩展了 JPanel。世界有一个 null 布局,所以我正在使用 setBounds(); 来“移动”(我实际上只是移动世界图像
在 styled-component 中,您如何决定是应该使用插值函数来修改组件(通过传递 props )还是扩展现有组件。例如: const Button = styled.button`
我搜索并获取了以下信息。 请添加您的信息 h:commandbutton 与 a4j:commandButton 相同,唯一的区别是 a4j:commandButton 有额外的 ajax 请求。 a
我目前在一个项目中,我们有一个动态“表单”/内容模型,其中我们有一个包含字段和占位符的模块,占位符可以包含更多模块,为我们提供递归/灵活的数据模型. 现在为了渲染这个,我们创建了一个组件来渲染模块,动
我是 React 的新手,正在尝试设置一个 Bootstrap 模式来显示警报消息。 在我的父 App.js 文件中,我有一个错误处理程序,它向 Modal.js 组件发送一个触发模态显示的 Prop
通过 background-color:red 获得主页组件写入其 scss,然后使用 background-color:green 获取用户组件写入它的 scss。我启动我的应用程序,我在家,背景是
我有这个基本的应用程序,其中一些组件具有公共(public) load 方法。对于某些操作,我想在当前 svelte:component 上调用该方法,但我不知道如何获取对组件实例的引用。如何做到这一
我是一名优秀的程序员,十分优秀!