#BaseLayout

[dsjghkbvkdj]

Understanding Slots in Vue

Slots serve as placeholders within a child component's template where parent components can insert their own content. This mechanism promotes component reusability and adaptability. There are different types of slots in Vue:

Default Slots: Allow the parent to pass content without a specific name.

Named Slots: Enable the parent to pass content to designated slots identified by names.

Scoped Slots: Provide a way for child components to pass data back to the parent through the slot, allowing the parent to render content based on that data.

Using Slots in <script setup>

With the introduction of the <script setup> syntax in Vue 3, handling slots has become more streamlined. The <script setup> is a compiler macro that allows you to write less boilerplate code when using the Composition API. To work with slots inside <script setup>, Vue provides the useSlots() and useAttrs() helper functions.

The useSlots() function returns an object containing all the slots passed to the component, which can be utilized within the <script setup> block. This is particularly useful when you need to programmatically interact with the slots.

vue

CopyEdit

<script setup> import { useSlots } from 'vue'; const slots = useSlots(); // You can now use `slots` to access the slots passed to this component </script>

In scenarios where you need to provide type hints for slots, especially when using TypeScript, Vue 3.3 introduced the defineSlots() macro. This macro allows you to define the expected slots and their props, enabling better type checking and editor support.

vue

CopyEdit

<script setup lang="ts"> const slots = defineSlots<{ default: (props: { msg: string }) => any; header: (props: { title: string }) => any; }>(); </script>

By defining slots in this manner, you enhance the maintainability and readability of your components, making it clear what slots are expected and what props they provide.

Practical Example

Let's consider a practical example where we have a BaseLayout component that utilizes named slots to structure a page layout:

vue

CopyEdit

<template> <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> <!-- default slot --> </main> <footer> <slot name="footer"></slot> </footer> </div> </template>

In the parent component, we can use the BaseLayout and provide content for each slot:

vue

CopyEdit

<template> <BaseLayout> <template #header> <h1>Page Title</h1> </template> <template #default> <p>This is the main content of the page.</p> </template> <template #footer> <p>© 2025 My Website</p> </template> </BaseLayout> </template>

In this example, the BaseLayout component defines three slots: header, default, and footer. The parent component then provides the content for each slot using the v-slot directive (shorthand #). This approach allows for a clean and organized way to compose layouts with reusable components.

Conclusion

Mastering the use of slots in Vue, particularly within the <script setup> syntax, empowers developers to create flexible and maintainable components. By effectively leveraging default, named, and scoped slots, you can build complex user interfaces that are both reusable and easy to manage. Understanding how to use slots in scripts is essential for any Vue developer aiming to write clean and efficient code.

more details : vue how to use slots in script

[mrcheetofinger]

Old skool Builder Base action!

[flutteragency]

How to set background image in Flutter?

Every Mobile Application has a different Background Color, Background Image based on the end user’s requirement. So in today’s article, We will be going through how to set background image in Flutter?

How to Set Background Image in Flutter?

If users want the image to fill the entire screen you can use a DecorationImage with a fit of BoxFit.cover.

class BaseLayout extends StatelessWidget{  @override  Widget build(BuildContext context){    return Scaffold(      body: Container(        decoration: BoxDecoration(          image: DecorationImage(            image: AssetImage("assets/images/bulb.jpg"),            fit: BoxFit.cover,          ),        ),        child: null /* add child content here */,      ),    );  } }

Users can also read our Container Widget article.

Users can also make use of the DecoratedBox Widget to achieve the same. consider a code snippet like below:

@override Widget build(BuildContext context) {  return DecoratedBox(    decoration: BoxDecoration(      image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),    ),    child: Center(child: FlutterLogo(size: 300)),  ); }

We will get output like below:

Users can use Stack Widget to make the image stretch to the full screen.

Stack(        children: <Widget>        [          Positioned.fill(  //            child: Image(              image: AssetImage('assets/placeholder.png'),              fit : BoxFit.fill,           ),          ),          ...... // other children widgets of Stack          ..........          .............         ] );

We can use Container Widget and mark its height as infinity.

Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      home: Scaffold(          appBar: AppBar(            title: const Text("Background Image"),          ),          body: SizedBox(            height: double.infinity,            width: double.infinity,            child: FittedBox(              fit: BoxFit.cover,              child: Image.network(                'https://images.unsplash.com/photo-1547721064-da6cfb341d50',              ),            ),          )),    );  }

We will get output like below:

Conclusion:

In this article, we have been through How to Set Background Image in Flutter?

Thanks for Reading. Keep Fluttering.

Do let us know if you need any assistance with Flutter Design & Flutter Development?

We would love to assist you with the same.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

[elizabethaudrey]

Why does ABT wallet support Webview? Steps to make DApp smoother in wallet Webview? _ ArcBlock Blog

Why support Webview? In the original ABT wallet[1] product design, for the security of the info in the wallet, we directly cut off the thought of ??supporting Webview in the wallet, making the wallet only a natural DID management device. After all, the customers of the ABT wallet will undoubtedly be inside it. Store digital assets, whether it's a pass or NFT. Following the wallet supports the DID Auth process [2], all applications developed based on ArcBlock technology will use BlockchainLink because the entry point to initiate various types of interactions to perform the point-to-point communication between the application and the user, such as for example requesting the user to provide a profile and requesting the user to sign the transfer transaction. , Signature swap transactions, etc. With the iteration of the wallet, we have become more and more aware of the security restrictions of the cellular operating system during the development of various small applications: for example, after the ABT wallet is named up from the mobile browser and the authorization operation is completed, it might be called back to another browser ( See here [3] and here [4]), the wallet user encounter problems caused by these security restrictions are simply as unpleasant. From the long-term perspective, user knowledge determines ecological development, and this problem should be resolved. After cautious discussion and research, we discovered that the benefits of helping WebView in the wallet in the current environment much outweigh the disadvantages: �EWebview is really a relatively mature technology. After several protection incidents, the cellular operating system has made several improvements. We are able to stand on the shoulders of giants. �EWebview's biggest risk of security could be JS injection into native applications The program code inside, this is simply not allowed and not supported in the ABT wallet, for the reason, see the next post �E The user-triggered conversation with the native wallet in the Webview (known as DID-Auth program) is actually a point-to-point between the app and the wallet Conversation, there is asymmetric encryption technology to ensure protection, and the result of the program is directly referred to the back end of the application, which also guarantees the safety of the application form What modifications will Webview bring? What adjustments have been made because the ABT wallet supports Webview? �EFirst of all, the scan code function of ABT wallet can directly open the URL. If the URL is undoubtedly a dApp, it will be documented by the wallet after one interaction. �E Secondly, all programs which have been interacted with the ABT wallet will be recorded. Open up the wallet's Webview to help make the user's research path shorter. Lastly, any dApp created with ArcBlock technologies can be opened up in the wallet through the Heavy Link supported by the wallet to open the application straight in the wallet to supply the smoothest Experience If you need to experience these situations, it is possible to scan the following two BlockchainLinks, and you also have to upgrade your ABT wallet to v2.5 before scanning the code (it is possible to swipe the wallet global web site [5] or wallet China site [6] if you want to upgrade): Open the standard URL and open up the application directly | Some students might ask: What is special about the Webview of ABT wallet? In fact, as well as the security restrictions mentioned above, it is a regular Webview embedded with contemporary web browser kernels, and it has very good assistance for HTML5 and CSS3. Steps to make dApp support Webview? If you are not really a developer, you can close this short article here. Next, we will introduce how to proceed to create your app experience better inside the wallet Webview. Using Blocklet is suitable for creating fresh projects. We've updated all Beginner Blocklets. Applications made out of these Blocklets have already been properly adapted to ABT wallets, such as for example automatic login, fundamental responsive layout, etc. , And built-in basic program management, user management, payment situations, the ways to use Blocklet may also be very simple: npm install -g @arcblock/forge-cli forge blocklet:make use of forge-react-starter Should you have not used Forge CLI (the Swiss Army Knife for dApp growth created by ArcBlock), please strike here [7]. The front-end of the currently released Javascript Blocklet is written in React.js[8], and the back-end uses Express.js[9]. You can choose the adhering to Blocklets in accordance with your requirements and actual needs: �EForge-react-starter[10], included our Forge SDK into create-react-app[11], which is very suitable for starting out �Eforge-next-starter[12], built-in our Forge SDK into following. js[13], ideal for students who want server-side rendering�Eforge-keystone-starter[14], incorporated our Forge SDK into following.js[15] and keystone.js[16], suitable for service needs Render and manage the background scene Integrated responsive layout In the event that you already have a operating application that must adjust to the Webview of the ABT wallet, the first thing you have to consider may be the responsive layout. The responsive layout allows any WebApp to scale freely on various screen dimensions. The responsive layout of is definitely encapsulated and can be used as follows: Initial, install dependencies: * yarn add @arcblock/ux# OR# npm install @arcblock/ux -S Then, use the Layout component in the layout component of WebApp: * import React from'react';import PropTypes from'prop-types';import BaseLayout from'@arcblock/ux/lib/Design'; export default function Layout( title, children ) const links = [url: '/', title:'Home' , url:'/profile', title:'Profile' , ]; if (env.chainHost) links.push( url: getExplorerUrl(env.chainHost,'local '), title:'Local Chain' ); return (children ); Layout.propTypes = title: PropTypes.string.isRequired, children: PropTypes.any.isRequired,; This responsive design is on Personal computer The rendered look at the end is as follows: Kraken The appearance on the mobile terminal is as follows:

Menu collapse style menu open style | Conditional rendering of components In some scenarios, some page elements may only need to be displayed or hidden in the wallet Webview. At the moment, an individual Agent needs to be examined, but we've furthermore packaged it out of the box. Initial, install dependencies: * yarn include @arcblock/react-hooks# OR# npm install @arcblock/react-hooks -S After that, make use of useBrowser Hook in the WebApp page: * import React from'react';import useBrowser from'@arcblock/react-hooks/lib/useBrowser'; export default function MyComponent() const browser = useBrowser(); return (browser.wallet && I am only visible when in ABT Wallet webview !browser.wallet && I am not visible when in ABT Wallet webview ); Once the logged-in consumer opens the application immediately, if you need to sign in automatically, you can do this: Initial, install dependencies: * yarn add @arcblock/did-react @arcblock/react-hooks# OR# npm install @arcblock/did-react @arcblock/react-hooks -S Then, utilize the useBrowser Hook and DidAuth parts in the login web page of the WebApp, and much more The complete code can be found in forge-react-starter[17]: * import React, useState, useEffect from'react';import api from'axios';import useBrowser from'@arcblock/react-hooks/lib/useBrowser';import DidAuth from'@arcblock/did-react/lib/ Auth'; export functionality Login( onLogin, loading ) const browser = useBrowser(); const [open, setOpen] = useState(false); // Automatically open DID login when detected in the wallet, DID login will be automatic Call up the native wallet interface useEffect(() => if (browser.wallet) setTimeout(() => setOpen(true); , 0); , [browser.wallet]); return (open && (responsive action="login" checkFn=api.get onClose=() => setOpen(false) onSuccess=() => console.log('login success') checkTimeout=5 * 60 * 1000 messages= title:'Login Required', scan:'Provide profile to login', confirm:'Confirm on your ABT Wallet', success:'Login Success', /> ) ); Below the FAQ How to make your dApp in growth Several suggestions that will assist you running in ABT Wallet beneath the environment: Simulate a wallet with Chrome Developer Tools? Refer to the tutorial here [18] to include several custom products to your Chrome browser. The User Real estate agent string of the new device can be set as follows: �EABT Wallet Google android version: Mozilla/5.0 (Linux; Android 9; MIX 2 Build/PKQ1.190118.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/80.0.3987.99 Mobile Safari/537.36 ABTWallet/2.5. 0�EABT Wallet iOS edition: Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac Operating system X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Cell phone/9B176 Safari/7534.48.3 ABTWallet/2.3.24 After opening the debugging tool, you can see the performance of one's dApp in the ABT wallet Webview. Open the dApp in the development atmosphere with the wallet? Two situations are required: �E Install this plug-in [19] on Chrome, and transfer the URL in the current address bar to BlockchainLink with one click on. �E Make sure your wallet and pc are in exactly the same network, normally the wallet cannot open the dApp in the advancement environment Encounter problems? If you encounter various other problems, please visit the developer community [20] for help, or go to the GitHub repository [21] to raise a concern to us. References[1] ABT Wallet:

[2] DID Auth protocol: [3] Here: [4] Here: [5] Wallet Worldwide Station: [6] Wallet China Station: [7] Right here: /handbook/1-introduction/install-forge-cli [8] React.js: [9] Show.js: [10] forge-react-starter: [11] create-react-app: [12] forge-next-starter: [13] following.js: [14] forge-keystone-starter: [15] following.js: [16] keystone.js: [17] forge-react-starter: [18] Here: [19] This plugin: [20] Developer community: [21] GitHub repository: To learn more on the cornerstones of ArcBlock, please follow the following channels: * Official website | * ABT Chain Network | * ABT Wallet | * Developer documentation | * Twitter | * Facebook | * LinkedIn | * Reddit | * Medium |

* Weibo | * Line group | Put "ABT Consensus Local community Associate (ID: L520abt1314)" friends in to the group * Telegram groups | Telegram groups: Telegram (English): Telegram (Chinese): �� Click the ABT document site to see the original text

[mrcheetofinger]

Sick OCD Base

[mrcheetofinger]

I totally forgot how much fun playing at the TH4 level is! Maximum base destruction.  All my troops on this base are maxed expect the loons.  Did I mention we are giving this base away?  That’s gonna be dope.  Want it?  Check the channel on how to claim it!  Cheeto Finger