as is defined as An element type to render as (string or function). in the most of the components in semantic-UI-react. What does that mean?
My understanding is that it somehow changes the component in whatever is as is.
Example:
https://react.semantic-ui.com/modules/sidebar
has Sidebar as={Menu} then the children are <Menu.Item name='...'> without typical <Menu/> that is required to start the menu.
This feature is called augmentation, you can control the rendered HTML tag or render one component as another component. Extra props are passed to the component you are rendering as. It allows to compose component features and props without adding extra nested components.
Your example with Sidebar shows that Sidebar will render its children to Menu. This can also be written in the following way, but this procudes extra markup, which is not always correct and possibly can break styling.
<Sidebar>
<Menu>
<Menu.Item />
</Menu>
</Sidebar>
Basic example with tags:
<Button /> // will produce <button class='ui button' />
<Button as='a' /> // will produce <a class='ui button' />
Example with react-router:
<Menu.Item as={Link} to='/home' /> // will produce <a class="item" href="/home">
Related
I am working on a Nativescript-vue app, and am having a strange problem with the Image component not sizing correctly.
I am trying to use stretch="aspectFill" to correctly size an image for a component. It works initially when live previewing in the ios simulator, but when you next render the component it reduces size to fit the space rather than aspectFill. My component code is below.
<StackLayout>
<Image :src="promo.image" stretch="aspectFill" height="200" />
<StackLayout class="promocontainer" row="1" padding="0">
<GridLayout columns="*,*" class="region">
<Label col="0" :text="promo.region" />
<Label col="1" :text="'$' + promo.price" textAlignment="right" />
</GridLayout>
<Label :text="promo.inclusions_heading" class="heading" />
<Label :text="promo.heading" padding="10" textWrap="true" class="tagline" />
<Label :text="promo.introText" padding="10" textWrap="true" class="text" />
</StackLayout>
</StackLayout>
When you change the strech option, the live preview in ios show the intended behavior as shown below
When interacting with the app, navigating away from this page and back, or previewing on a physical ios device, the image is show as below, instead of the intended aspect filled image as above.
I am hoping someone has run into this before and might be able to assist with working out a solution.
The component was being added to a ListView, which was causing the rendering issues above. I resolved this by instead wrapping the components in a ScrollView and StackLayout. This solved the stretch rendering issue straight away.
Original code with stretch bug:
<ListView for="promo in promos" #itemTap="onPromoTap">
<v-template>
<PromoListItem :promo="promo" />
</v-template>
</ListView>
Solution:
<ScrollView>
<StackLayout>
<PromoListItem margin="10" v-for="promo in promos" :key="promo.heading" :promo="promo" />
</StackLayout>
</ScrollView>
It looks like ListView calculates it's item sizing differently, and is not compatible with Image stretch, at least when there is other content involved.
Hi I have the following Component Template:
test-component.hbs: (produces img tag per model)
{{#each titleModels}}
<div class="item">
<img {{action "owlItemClicked" id index on="click" }} {{bind-attr src=img}}></img>
</div>
{{/each}}
Its used in parent template
parent.hbs:
{{test-component action="titleClicked" parentController=controller titleModels=model}}
On titleClicked action it is suppose to remove the clickedModel and refresh the template to show the removed view.
parent-controller.js:
modelChanged: false,
actions: {
titleClicked: function(){
self.get('model').removeObject(aSelectedModel);
self.set('modelChanged',true);
}
}
The test-component observes changes to titlesModel and rerenders the template:
test-component.js:
titleModelsChanged: function(){
this.rerender();
}.observes('parentController.modelChanged'),
this.rerender methos is called successfully and the specific html tag (e.g the one defined below) for the removed model is no longer present in the DOM for html page generated from test-component.hbs as expected.
<img {{action "owlItemClicked" id index on="click" }} {{bind-attr src=img}}></img>
The img tags for the remaining models are present when inspecting the dom. However they are not displayed out the actual html page ( i dont see the actual imgs), even though the are present in the DOM when I inspect the elements.
How do I display the img tags of the remaining models after rerender on the html page ?
First, two small notes. The <img> tag must not have a closing tag. So no <img></img> but simply <img> (or <img /> alternatively).
The context-changing {{each}} as you use it is deprecated in current and future versions of Ember.js. So you should rewrite your component as
{{#each titleModels as |titleModel|}}
<div class="item">
<img {{action "owlItemClicked" titleModel.id titleModel.index on="click" }} {{bind-attr src=titleModel.img}}>
</div>
{{/each}}
Now to your question. Given that the <img> tags are in the DOM but the actual image is not visible, the problem must be in the src attribute of the images. If you open the URL in the src in a separate tab, do you see the image you're supposed to see?
The JSBin http://emberjs.jsbin.com/mitadovero/edit?html,js,output solves the problem.
I have a template where I have the following code:
<div {{bind-attr class=":suggestions isRecept::disabled"}} {{action "toggleRecept"}}>
<!-- skipped the rest -->
<a {{bind-attr href="recept_pdf" bubbles=false}}>Click for the recept!</a></p>
</div>
I want to link to an external pdf file. However when a user click on the link, the toggleRecept visibility action is fired. The bubbles=false is incorrect code, but that is what I wanted.
I know it is possible to limit the action, but I am curious if it is possible to do some bubble preventing on a simple HTML attribute.
moving from actionscript (flex) to titanium and I'm experimenting with the xml markup. What I have is a template that I picked up from the doc
<ItemTemplate name="template">
<ImageView left="0" bindId="pic" id="icon" />
<Label bindId="info" id="title"/>
</ItemTemplate>
</Templates>
my question is if someone clicks on the pic or a listitem itself, how does one handle the events. through xml markup? Then how do you reference any of the control wrap in the template?
I have tried
<ImageView left="0" bindId="pic" id="icon" onclick="doClick()" />
function doClick(e) {
alert($.info.text);
}
This just produces a error and I still would not know what pic was clicked.
any help would be great..
thanks Mike
Have you checked out the Alloy Quick Start? I think many of your questions can be answered there.
Anyway, for ListViews, you cant add an event listener to an item in the template, its just a template not an actual thing on the screen (yet), refer here, and look at the alloy section.
Instead you need the itemclick event listener on the ListView itself. Check , below for a simple example of what the XML markup looks like.
<ListView id="listView" defaultItemTemplate="template" onitemclick="yourEvent" >
<!-- The Templates tag sets the ListView's templates property -->
<Templates>
<!-- Define your item templates within the Templates tags or use the
Require tag to include a view that only contains an ItemTemplate -->
<ItemTemplate name="template">
<ImageView bindId="pic" id="icon" />
<Label bindId="info" id="title" />
<Label bindId="es_info" id="subtitle" />
</ItemTemplate>
</Templates>
<ListSection headerTitle="Fruit / Frutas">
<!-- You can specify any ListItem or ListDataItem properties in ListItem -->
<!-- Specify data to bind to the item template with inline attributes
defined as <bindId>:<Ti.UI.Component.property> -->
<ListItem info:text="Apple" es_info:text="Manzana" pic:image="/apple.png" />
<ListItem info:text="Banana" es_info:text="Banana" pic:image="/banana.png" />
</ListSection>
</ListView>
Also, you need any JavaScript to be in the controller files, not in the XML markup files. *.js has javascript that is behind the view, which is *.xml.
I would like to create a layout in which I iterate over a collection with #each and then pass that object to yield. Is that possible?
What I would like achieve is:
<!-- timeline_layout.hbs -->
<div id="timeline-container">
{{#each entry in controller}}
<div class='timeline-entry'>
{{yield entry}}
</div>
{{/each}}
</div>
<!-- timeline_instance.hbs (timeline with posts) -->
{{#view App.Timeline}} <!-- has layout set to timeline_layout -->
{{render 'post' entry}}
{{/view}}
If guess that is not possible, right? Since render 'post' can't know about the entry. So what is the ember way to encapsulate the general html structure of the timeline?
"A template used as a layout must contain a single use of the Handlebars {{yield}} helper. " ember.js views. Your approach essentially breaks this rule, as you're trying to create a new yield for each entry in your controller- you should look at refactoring your each into the template.