In Angular, we can use *ngIf directive in the template in case if we want to create/remove (also show/hide) dom element.
Is there an analog of "ngIf" directive in NativeScript without Angular?
NativeScript supports the "collapsed" and "visible" states of the CSS visibility property.
This means you can hide an element by setting its "visibility" property to "collapsed" in CSS.
And you can conditionally change its property which will be (near about) same as angular's ngIf condition.
visibility="{{ showTextDetails ? 'visible' : 'collapsed' }}"
Hope this help!
Related
To make the hover effect of a v-btn node in vuetify more visible I use the following code:
<v-hover v-slot:default="{ hover }" open-delay="200" class="ma-1">
<v-btn color="primary"
v-if="..." v-on:click="..." :elevation="hover ? 16 : 2"
>
Button Title
</v-btn>
</v-hover>
It is working, but in Chrome I get the warning "v-hover should only contain a single element".
Any advice to avoid this?
The v-if removes the <v-btn/> element on the DOM so when showBtn is set to false, <v-hover/> is saying that it has no child.
Use v-show, instead of v-if, so the <v-btn/> element will not be removed entirely from the DOM. It will just hide it (similar to display: none;). OR put the v-if in the <v-hover/> element instead.
See this demo at codesandbox.
I want to use in line editing option in Vuetify Datatable component instead of opening a dialog box for editing.
Is there a way to use contenteditable attribute in element in vuetify Datatable component.
According to MDN https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable you can apply contenteditable attribute to any HTMLElement.
Try adding the attribute to the element you want to edit.
eg
<div contenteditable="true"></div>
Vuetify has an inbuild content editable mode.
DOCS
The idea is that in every slot you add a v-edit-dialog and v-text-field and then sync the data using v-model and return-value.sync
Instead of using contenteditable attribute, I used the following code and worked perfectly (editable without opening a dialog box and save to bind variable)
<template v-slot:item.name="props">
<v-text-field v-model="props.item.name"> </v-text-field>
</template>
While using v-text-field on vuetify I am able to use the name attribute and capture the form input. However, a name attribute on v-select doesn't seem to work. I am currently using Vuetify for theming only within a laravel application and do not want to reach into using v-model. Is there a way to work around this so I can get the form value from v-select.
<v-select name="parent_id"
:items="{{ json_encode($entries) }}"
label="Select Parent" {{ !$errors->has('parent_id') ?'': 'error' }}
hint="{{ $errors->has('parent_id') ? $errors->first('parent_id') :"" }}" persistent-hint="">
</v-select>
For brevity, ive not included the v-text-field options. However on the backend I am able to obtain everything other than parent_id as shown.
v-select component has two props one for display and other for value
item-value , item-text
if we has
items =[
{id:1,name:'hi'}
];
we can use <v-select :items="items" item-value="id" item-text="name" />
I have the following HTML markup
<video poster="home-bg.jpg" autoplay="autoplay" loop="loop" muted="" data-autoplay="" playsinline="" width="982" height="552">
<source src="short.mp4" type="video/mp4">
</video>
The problem is that the Joomla editors, at least the two main ones tinyMCE and JCE, are eliminating the attribute playsinline from the Video tag.
I already tried adding exceptions or adding this attribute to valid attributes but I have had not success.
The attribute gets eliminated no matter what.
If I disable all editors the attribute remains but I need the editors active.
Any help?
You can modify how an element is filtered by TinyMCE using the extended_valid_elements in init method, you can specify the html attributes you want to keep:
tinymce.init({selector:'textarea',
extended_valid_elements : 'video[autoplay|muted|loop|playsinline|class]'
});
I'm trying to setup a RadioGroup component that has the Radio component with the 'Data' label initially checked. But when I use the following code:
<RadioGroup
onChange={(e) => {
this.store.setDataFilterSelection(e.target.value)
}}
>
<Radio label='Data'
defaultChecked
value='1'
className='radio-selectors' />
<Radio label='Description'
value='2'
className='radio-selectors' />
<Radio label='Data Source'
value='3'
className='radio-selectors' />
</RadioGroup>
I get the following warning in my console.
Blueprint.Radio contains an input of type radio with both checked and
defaultChecked props. Input elements must be either controlled or
uncontrolled (specify either the checked prop, or the defaultChecked
prop, but not both). Decide between using a controlled or uncontrolled
input element and remove one of these props. More info:
react-controlled-components
I've tried a couple of variations and can't seem to get it right, basically I want to be able to monitor a change in the Radio buttons, but I can't tie them into state as they've done in the example here: http://blueprintjs.com/docs/#components.forms.radio
defaultChecked is only supported in uncontrolled usage (this is a core React concept, not a Blueprint thing), whereas checked is only supported in controlled usage--this is what the React error is telling you.
But if you're using RadioGroup then all the Radio children are forced into controlled mode and all state should go through RadioGroup. However RadioGroup does not currently support a defaultValue prop so this is not actually possible. I'd call this a bug in Blueprint, so good find!
Please file an issue on the repo and we'll look into implementing this (or even better, submit a PR with the fix!)
I had same error and I used useState and set the value which we want to be default while declaring the state like
const [radio, setRadio] = useState('defaultValue');.
Since we cant use defaultChecked I used the above method to get the option to be default checked.