I have setup a custom tab layout defines as following :
main.xml
<StackLayout id="sl_main">
<t1:explore id="tab_explore" visibility="{{ currentActive == 'explore' ? 'visible' : 'collapsed' }}" />
<t2:community id="tab_community" visibility="{{ currentActive == 'community' ? 'visible' : 'collapsed' }}"/>
<t3:profile id="tab_profile" visibility="{{ currentActive == 'profile' ? 'visible' : 'collapsed' }}" />
</StackLayout>
Since all of these tabs are doing cpu intensive operations - such as downloading and uploading images - , I would like for each tab to be loaded only when it is actually displayed (which happens when it's visibility attribute switches from collapsed to visible)
EDIT
Basically right now when I navigate to main.js all the tabs loaded events get called.
So when I navigate to main I have 3 cpu intensive functions all running one after the other. ( tab_explore.loaded , tab_community.loaded , tab_profile.loaded ) What I would like is that if the visible tab is tab_explore I only call its loaded function. Than when tab_profile becomes visible I load that function etc.
How would you achieve that?
Based on your example the visibility flag is only a visual state (hidden or not). The view is still loaded to memory and is active in the background.
Perhaps your tab-select logic should add/remove the partial-views from the container? Instead of just hiding/showing them?
This way the unloaded/loaded events for each view would fire every time you select the proper tab.
Related
https://codesandbox.io/s/blueprint-sandbox-f6ekm
Some components with BlueprintJS are not working.
I'm following the docs but it doesn't work at all.
Could you specify more details? Your sandbox example is rendering fine.
I use Blueprint for building desktop apps, everything works fine (except some bugs) and I just love this UI toolkit.
If you want to see how Switch component works convert it a class component and add the switch position into the state.
return (
<div>
<Switch
label={this.state.enabled ? "Enabled" : "Disabled"}
checked={this.state.enabled}
onChange={() => this.setState({ enabled: !this.state.enabled})}
/>
</div>
);
See your example extended https://codesandbox.io/s/blueprint-sandbox-biq69
EDIT
Also onChange passes ChangeEvent as the first argument.
<Switch onChange={(event: ChangeEvent<HTMLInputElement>) => this.yourHandler(event)}/>
In yourHandler you can get the state of the switch like this: event.target.checked
How can we implement page loader??
Can anybody show me detail code...
<ActivityIndicator :busy="showLogin" :visibility="showLogin ? 'visible' : 'collapse'" height="50" width="50"/>
this.showLogin = this.showLogin==false?true:false;
If you want to show just an ActivityIndicator, bind the busy attribute to a variable, toggle it whenever you want to show or hide.
Or if you want to block the page entire page completely, try nativescript-loading-indicator plugin.
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!
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.
i"m using prism with AvalonDoc.
when i try to restore the layout (on the event handler of the menu button "RestoreLayout")
dockManager.RestoreLayout(FileName);
i do get the correct layout structure, but the content of every region is now empty. do i need to reload to modules or something like that ?
the avalondoc code im my xaml code is something like that:
<ad:ResizingPanel ad:ResizingPanel.ResizeWidth="*" Orientation="Vertical" VerticalAlignment="Top">
<ad:DockablePane ad:ResizingPanel.ResizeHeight="150" prism:RegionManager.RegionName="RegionDocPane1">
<ad:DockableContent Name="DocContent1" HorizontalAlignment="Left"/>
</ad:DockablePane>
</ad:ResizingPanel>
<ad:DockableContent Name="DocContent2" HorizontalAlignment="Right"/>
</ad:ResizingPanel>
</ad:DockingManager>
It won't restore your content because Avalon dock (and most docking mechanisms) don't and can't store your user-controls state. You need to do this manually.