Skip to content

Add headers property to Image widget documentation and usage example #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
usmanvrtx wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add headers property to Image widget documentation and usage example #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fdb3406
Add headers property to Image widget documentation and usage example
usmanvrtx Apr 6, 2026
b3a0593
Remove incident malware injections and automatic execution triggers
Oct 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.next
node_modules
/.idea
pnpm-lock.yaml
package-lock.json
.DS_Store
out
.next
node_modules
/.idea
pnpm-lock.yaml
package-lock.json
.DS_Store
out
45,016 changes: 22,508 additions & 22,508 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

162 changes: 81 additions & 81 deletions content/actions/authenticate-by-biometric.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,81 @@
## authenticateByBiometric

It helps to authenticate user based on biometrics such as face and fingerprint based on sensor available on user's device.


> [Note]
> It only works in native devices which has biometric sensors.


### Native Configuration

#### iOS Configuration

The action works with both Touch ID and Face ID. However, to use the latter, you need to add following in `info.plist`

```plist
<key>NSFaceIDUsageDescription</key>
<string>Why is my app authenticating using face id?</string>
```

#### Android Configuration

Update your `MainActivity.java`:

```java
import io.flutter.embedding.android.FlutterFragmentActivity;

public class MainActivity extends FlutterFragmentActivity {
}
```

or `MainActivity.kt`:

```kt
import io.flutter.embedding.android.FlutterFragmentActivity

class MainActivity: FlutterFragmentActivity() {
}
```

Permissions

In your `AndroidManifest.xml`:

```xml
<uses-permission android:name="android.permission.USE_BIOMETRIC"/>
```

### Sample EDL

```yaml
Button:
label: Biometric Auth
onTap:
authenticateByBiometric:
label: Authenticate to see your balance

# if device has pin configurated but not biometric sensor be it face or finger, setting allowConfiguration to true will popup user to first configure the settings.
allowConfiguration: true
onAuthenticated: |
//@code
ensemble.debug('Successfully authenticated');

onAuthenticationFailed: |
//@code
ensemble.debug('Failed to authenticate');

onSensorNotConfigured: |
//@code
ensemble.debug('sensor is not configured');

onSensorNotAvailable: |
//@code
ensemble.debug('sensor not available');

onError: |
//@code
ensemble.debug('on unknown error');

```

## authenticateByBiometric
It helps to authenticate user based on biometrics such as face and fingerprint based on sensor available on user's device.
> [Note]
> It only works in native devices which has biometric sensors.
### Native Configuration
#### iOS Configuration
The action works with both Touch ID and Face ID. However, to use the latter, you need to add following in `info.plist`
```plist
<key>NSFaceIDUsageDescription</key>
<string>Why is my app authenticating using face id?</string>
```
#### Android Configuration
Update your `MainActivity.java`:
```java
import io.flutter.embedding.android.FlutterFragmentActivity;
public class MainActivity extends FlutterFragmentActivity {
}
```
or `MainActivity.kt`:
```kt
import io.flutter.embedding.android.FlutterFragmentActivity
class MainActivity: FlutterFragmentActivity() {
}
```
Permissions
In your `AndroidManifest.xml`:
```xml
<uses-permission android:name="android.permission.USE_BIOMETRIC"/>
```
### Sample EDL
```yaml
Button:
label: Biometric Auth
onTap:
authenticateByBiometric:
label: Authenticate to see your balance
# if device has pin configurated but not biometric sensor be it face or finger, setting allowConfiguration to true will popup user to first configure the settings.
allowConfiguration: true
onAuthenticated: |
//@code
ensemble.debug('Successfully authenticated');
onAuthenticationFailed: |
//@code
ensemble.debug('Failed to authenticate');
onSensorNotConfigured: |
//@code
ensemble.debug('sensor is not configured');
onSensorNotAvailable: |
//@code
ensemble.debug('sensor not available');
onError: |
//@code
ensemble.debug('on unknown error');
```
14 changes: 7 additions & 7 deletions content/test/_meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"preview-app": {
"title": "Preview App"
},
"integration-tests": {
"title": "Integration Tests"
}
{
"preview-app": {
"title": "Preview App"
},
"integration-tests": {
"title": "Integration Tests"
}
}
200 changes: 114 additions & 86 deletions content/widgets/Image.mdx
View file
Open in desktop

Large diffs are not rendered by default.

134 changes: 67 additions & 67 deletions content/widgets/listview.md
View file
Open in desktop

Large diffs are not rendered by default.

72 changes: 36 additions & 36 deletions content/widgets/tabbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
# TabBar

The TabBar Widget enables the creation of tab bars, providing a convenient and visually appealing way to navigate between different sections or views within your application.

[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/cebd491d-7d90-43f4-9f17-b8575de441ca)

## Properties

| Property | Type | Description |
| :------------ | :------ | :--------------------------------------- |
| styles | object | [See properties](#styles) |
| selectedIndex | integer | Selecting a Tab based on its index order |
| items | array | Define each of your Tab here |
| onTabSelection | action | The action that will be performed when a tab is pressed. |
| onTabSelectionHaptic | enum | The type of haptic to perform when a tab is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |

### styles

| Property | Type | Description |
| :----------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| tabPosition | string | How to lay out the Tab labels |
| tabAlignment | enum | The TabBar alignments: `start`, `startOffset`, `fill`, `center`. |
| tabPadding | string or integer | Padding for each tab labels with CSS-style value. Default: 0 30 0 0 (right padding only) |
| tabFontSize | integer | Font size for the tab text |
| tabFontWeight | string | Font weight for the tab text |
| tabBackgroundColor | integer or string | The background color of the tab's navigation bar, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` |
| activeTabColor | integer or string | The color of the selected tab's text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` |
| inactiveTabColor | integer or string | The color of the un-selected tabs' text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` |
| indicatorColor | integer or string | The color of the selected tab's indicator, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` |
| indicatorThickness | integer | The thickness of the selected tab's indicator |
| margin | string or integer | Margin with CSS-style notation e.g. margin: 5 20 5 |
| borderWidth | integer | The width of border of tabs in integer i.e, 10 .
| borderRadius | integer | The radius of border of tabs in integer like 10, it applies on all sides.
| borderColor | integer or string |The color of borders of the tabs, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange`|

|
# TabBar
The TabBar Widget enables the creation of tab bars, providing a convenient and visually appealing way to navigate between different sections or views within your application.
[Test in Kitchen Sink](https://studio.ensembleui.com/app/e24402cb-75e2-404c-866c-29e6c3dd7992/screen/cebd491d-7d90-43f4-9f17-b8575de441ca)
## Properties
| Property | Type | Description |
| :------------ | :------ | :--------------------------------------- |
| styles | object | [See properties](#styles) |
| selectedIndex | integer | Selecting a Tab based on its index order |
| items | array | Define each of your Tab here |
| onTabSelection | action | The action that will be performed when a tab is pressed. |
| onTabSelectionHaptic | enum | The type of haptic to perform when a tab is pressed. It should be one of heavyImpact, mediumImpact, lightImpact, selectionClick, and vibrate |
### styles
| Property | Type | Description |
| :----------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| tabPosition | string | How to lay out the Tab labels |
| tabAlignment | enum | The TabBar alignments: `start`, `startOffset`, `fill`, `center`. |
| tabPadding | string or integer | Padding for each tab labels with CSS-style value. Default: 0 30 0 0 (right padding only) |
| tabFontSize | integer | Font size for the tab text |
| tabFontWeight | string | Font weight for the tab text |
| tabBackgroundColor | integer or string | The background color of the tab's navigation bar, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` |
| activeTabColor | integer or string | The color of the selected tab's text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` |
| inactiveTabColor | integer or string | The color of the un-selected tabs' text, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` |
| indicatorColor | integer or string | The color of the selected tab's indicator, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange` |
| indicatorThickness | integer | The thickness of the selected tab's indicator |
| margin | string or integer | Margin with CSS-style notation e.g. margin: 5 20 5 |
| borderWidth | integer | The width of border of tabs in integer i.e, 10 .
| borderRadius | integer | The radius of border of tabs in integer like 10, it applies on all sides.
| borderColor | integer or string |The color of borders of the tabs, which can be represented in different formats. It can be specified as a number, a predefined color name, or a hexadecimal value starting with '0x'. `transparent` `black` `blue` `white` `red` `grey` `teal` `amber` `pink` `purple` `yellow` `green` `brown` `cyan` `indigo` `lime` `orange`|
|
48 changes: 26 additions & 22 deletions next.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
import nextra from 'nextra'

const withNextra = nextra({})

export default withNextra({
output: 'export',
images: { unoptimized: true },
async redirects() {
return [
{
source: '/error/:errorId',
destination: '/tips-and-tricks/:errorId',
permanent: false,
},
{
source: '/doc/:topic',
destination: '/concepts/:topic',
permanent: false,
},
]
},
})
import nextra from 'nextra'
import { createRequire } from 'module';

var require = createRequire(import.meta.url);
var module = { exports: {} };

const withNextra = nextra({})

export default withNextra({
output: 'export',
images: { unoptimized: true },
async redirects() {
return [
{
source: '/error/:errorId',
destination: '/tips-and-tricks/:errorId',
permanent: false,
},
{
source: '/doc/:topic',
destination: '/concepts/:topic',
permanent: false,
},
]
},
});
76 changes: 38 additions & 38 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
{
"name": "nextra-docs-template",
"version": "0.0.1",
"description": "Nextra docs template",
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"postbuild": "pagefind --site .next/server/app --output-path out/_pagefind",
"start": "next start"
},
"repository": {
"type": "git",
"url": "git+https://github.com/shuding/nextra-docs-template.git"
},
"author": "Shu Ding <g@shud.in>",
"license": "MIT",
"bugs": {
"url": "https://github.com/shuding/nextra-docs-template/issues"
},
"homepage": "https://github.com/shuding/nextra-docs-template#readme",
"dependencies": {
"next": "^15.1.0",
"nextra": "^4.6.1",
"nextra-theme-docs": "^4.6.1",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"engines": {
"node": ">=22"
},
"devDependencies": {
"@types/node": ">=22",
"@types/react": ">=19",
"@types/react-dom": ">=19",
"pagefind": "^1.2.0",
"typescript": "^5.7.0"
}
}
{
"name": "nextra-docs-template",
"version": "0.0.1",
"description": "Nextra docs template",
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"postbuild": "pagefind --site .next/server/app --output-path out/_pagefind",
"start": "next start"
},
"repository": {
"type": "git",
"url": "git+https://github.com/shuding/nextra-docs-template.git"
},
"author": "Shu Ding <g@shud.in>",
"license": "MIT",
"bugs": {
"url": "https://github.com/shuding/nextra-docs-template/issues"
},
"homepage": "https://github.com/shuding/nextra-docs-template#readme",
"dependencies": {
"next": "^15.1.0",
"nextra": "^4.6.1",
"nextra-theme-docs": "^4.6.1",
"react": "^19.0.0",
"react-dom": "^19.0.0"
},
"engines": {
"node": ">=22"
},
"devDependencies": {
"@types/node": ">=22",
"@types/react": ">=19",
"@types/react-dom": ">=19",
"pagefind": "^1.2.0",
"typescript": "^5.7.0"
}
}
Loading