<el-tabs ref="tabs" v-model="activeName" #tab-click="handleClick">
<slot />
</el-tabs>
When I used vue3 and element-plus.I want to get the pane length of el-tabs.But I can't get this property through the template ref.Please what should I do?
Related
I am using a computed property (in Vue 3 with the composition API) and binding it to an img src attribute.
const arrowUrl = computed(() =>
width.value > thresholds.value.xl
? '/img/elements/arrow.svg'
: '/img/elements/arrow_small.svg'
);
<img :src="arrowUrl"></img>
When I inspect the first call of the computed property (on load with a breakpoint):
The /img/elements/arrow_small.svg is already displayed.
It returns /img/elements/arrow.svg but it won't display it.
I changed the width of the frame lower than the thresholds.value.xl and then I changed it back to the initial width and the right img src (/img/elements/arrow.svg) is displayed.
I don't understand why the arrow_small.svg is displayed before the first call of the computed property and why when I change the width of the frame it works.
What am I missing?
Within a series of check boxes (lets say 3 options) I am looking to target a specific input element on the checking/unchecking of the associated label.
HAML
.choice-select-button
= check_box_tag("order[recipes][]", recipe.id, selected)
= label_tag do
= t(".step_4.tick_box_to_select")
Renders HTML
<div class="choice-select-button">
<input type="checkbox" name="order[recipes][]" id="order_recipes_" value="6" checked="checked">
<label>Click to select</label>
</div>
Each <input> is assigned same id, namely id="order_recipes_" so if I give set <label for="order_recipes_"> and the user then 'un-checks' the label then only the first input on the page with the id="order_recipes_" is styled according to my css instructions.
The only differentiator I can see for the choice-select-button.input is it's value. As such I was looking at giving the label a for= that targets inputs with the id="order_recipes_ AND value="6". First up, is this doable, and secondly, is the best way to do something like this or is there a much more simple method?
Thanks in advance.
According to the rrails doc:
check_box_tag(name, value = "1", checked = false, options = {}) Link
Creates a check box form input tag.
Options
:disabled - If set to true, the user will not be able to use this
input.
Any other key creates standard HTML options for the tag.
you can generate different ids like this:
check_box_tag("order[recipes][]", recipe.id, selected, {id: recipe.id})
environment: Plone 4.3.7, plone.app.contenttypes 1.1b5, eea.facetednavigation 8.7
I have a custom Dexterity Container type, Monument, that holds Image items only. My intention is to make Monument containing Image items behave just like News Item with the Image field. In case there are more than one Image items within Monument, the first one or a random one returned.
This way, I can display Monument items with their Image as thumbnails for eea.facetednavigation views.
FYI, there are 3 cases in eea.facetednavigation/views/preview-item.pt to show thumbnails:
is_namedimage python:getattr(getattr(context, 'image', None), 'getImageSize', None) is not None;
image_thumb exists:context/image_thumb;
image_tag python:getattr(context, 'tag', None)"
The example at plone.app.discussion/interfaces.py inspires me. So I try the following:
In models/monument.xml:
<schema>
...
<field name="image"
type="plone.namedfile.field.NamedBlobImage">
<title i18n:translate="">Image</title>
<readonly>True</readonly>
</field>
...
</schema>
In content.py:
#implementer(IMonument)
class Monument(Container):
"""Container Subclass for Monument
"""
#property
def image(self):
catalog = getToolByName(self, 'portal_catalog')
path = '/'.join(self.getPhysicalPath())
brain = catalog(path={"query": path}, portal_type=['Image'])
obj = brain[0].getObject()
return obj.image
But, it seems Monument item does not get image attribute accordingly. Am I moving toward the right direction? Any hints are appreciated.
Can you use the LeadImageBehavior for your Monument-Foldertype? In profiles/default/types/monument.xml add this if you need a image field.
Then you can register IObjectModifiedEvent for Monument and manipulate the imagefield in the event.
<?xml version="1.0"?>
<object name="Monument" meta_type="Dexterity FTI">
<property name="behaviors" purge="False">
<element value="plone.app.contenttypes.behaviors.leadimage.ILeadImage"/>
</property>
</object>
Here is my code for tabbed bar:
<Alloy>
<Window class="container">
<Label id="label" onClick="doClick">Hello, World</Label>
<TabbedBar id="bb1" platform="ios" backgroundColor="#369" top="50" height="25" width="200">
<!-- The Labels tag sets the TabbedBar.labels property. -->
<Labels>
<!-- Specify text with node text or the title attribute. -->
<!-- Can also specify the enabled, image and width attributes. -->
<Label>One</Label>
<Label>Two</Label>
<Label>Three</Label>
</Labels>
<!-- Place additional views for the TabbedBar here. -->
<Views>
<View backgroundColor='red'>1</View>
<View>2</View>
<View><Label>Does this work!</Label></View>
</Views>
</TabbedBar>
</Window>
</Alloy>
When I click on a tab, how can I make sure that the view corresponds to the button pressed - I know how to do this in titanium but not alloy.
Cheers.
I had the same problem yesterday. I'm sure there must be a better way but I couldn't see anything in the documentation, this was my solution:
var animation = require('alloy/animation');
var previousIndex = $.tabbedBar.getIndex();
$.tabbedBar.addEventListener('click', function(){
var currentIndex = $.tabbedBar.getIndex();
var viewArr = [];
viewArr[0] = $.view1;
viewArr[1] = $.view2;
viewArr[2] = $.view3;
animation.crossFade(viewArr[previousIndex], viewArr[currentIndex], 700)
previousIndex = currentIndex;
});
EDIT:
(In case you don't know, on Android there's a module to give you similar functionality: https://github.com/ricardoalcocer/viewpager but check issue #5 on the original repo as you'll have to incorporate that into any build. On the Android version, you don't need to handle the clicks yourself.)
in flex my button appears in the line below a formitem. is there any other way of adding in a button so that it will appear on the same level as the rest of the formitem? There does not seem to be a button property on the formitem code. Attached is an example of a formitem and the code for a button underneath. Any suggestions most welcome, thank you.
<ch:FormItem label="Gym Dosier Type:" >
<pss:dossierFinder id="gymOriginFinder" displayLabel="true"
allowMultipleSelection="false"
autoContactServer="true"
initialAccountClass="{AccountClassConstants.gym}"
accountClassEnabled="false"
initialMultigym="{gymInterdossierchinder.model.selectedItem.code}"
initialgymsource="{gymsource.model.selectedItem.internalCode}"/>
<mx:Button id = "addLineButton" icon="{addIcon}" toolTip="Add new gym member" click="{addPack(event)}" enabled="true"/>
</ch:FormItem>
I am not clear if the <ch:FormItem/> is your own separate component or just extends mx:FormItem, but in latter case, uou can set the direction parameter of the FormItem component to horizontal.