LifeFactors
LifeFactors
alert
block\_replacement
bullet\_list
callout
heading
icon
list\_item
ordered\_list
section
step
step\_list
text
wizard
wizard\_step
You don't have permission to delete this session.
Get up and running with IAM in minutes with practical examples.
SmarterServices Resource Name format for identifying protected resources.
Action naming conventions, wildcards, and service-specific operations.
Policy structure, syntax, examples, and role-based configurations.
Advanced conditional access controls for fine-grained permissions.
Available client libraries for different platforms and languages.
Complete guide for integrating IAM into your applications and services.
@smarterservices/iam-client
@smarterservices/iam-node
@smarterservices/iam-react
@smarterservices/iam-vue
Click the buttons below to open different types of modals:
``` ## Size Constraints Examples ### Basic Constraints Control element dimensions with min/max width and height: ```javascript theme={null} import { SmarterElements } from '@smarterservices/smarter-elements'; const elements = new SmarterElements({ baseUrl: '/elements' }); // Create element with size constraints const element = elements.create('blockkit/renderer', { config: { blocksJson: JSON.stringify([ { type: "heading", level: 1, text: "Constrained Element" }, { type: "text", text: "This element has size constraints applied." } ]) }, constraints: { minWidth: 300, // Minimum 300px wide maxWidth: 800, // Maximum 800px wide minHeight: 200, // Minimum 200px tall maxHeight: 400 // Maximum 400px tall } }); element.mount('#constrained-container'); ``` ### Responsive Constraints with CSS Units Use CSS units for responsive behavior: ```javascript theme={null} const responsiveElement = elements.create('blockkit/renderer', { config: { /* ... */ }, constraints: { minWidth: '20rem', // Minimum 20rem (320px at default font size) maxWidth: '80%', // Maximum 80% of parent container minHeight: '15vh', // Minimum 15% of viewport height maxHeight: '50vh' // Maximum 50% of viewport height } }); responsiveElement.mount('#responsive-container'); ``` ### Dynamic Constraint Updates Update constraints after element is mounted: ```javascript theme={null} const element = elements.create('blockkit/renderer', { config: { /* ... */ }, constraints: { maxHeight: 300 } }); element.mount('#dynamic-container'); // Update constraints based on user interaction document.getElementById('expand-btn').addEventListener('click', () => { element.updateConstraints({ maxHeight: 600, maxWidth: 1000 }); }); document.getElementById('compact-btn').addEventListener('click', () => { element.updateConstraints({ maxHeight: 200, maxWidth: 400 }); }); ``` ### Container-Aware Constraints Elements respect parent container boundaries: ```html theme={null}Unable to load ${type} element
Loading element...