فهرست منبع

Update bind.md (#2283)

Adding conditional inline styles example to x-bind:style
James Auble 3 سال پیش
والد
کامیت
ea5dd8e3c8
1فایلهای تغییر یافته به همراه8 افزوده شده و 0 حذف شده
  1. 8 0
      packages/docs/src/en/directives/bind.md

+ 8 - 0
packages/docs/src/en/directives/bind.md

@@ -124,6 +124,14 @@ Just like the class objects, this syntax is entirely optional. Only use it if it
 <div style="color: red; display: flex;" ...>
 ```
 
+Conditional inline styling is possible using expressions just like with x-bind:class. Short circuit operators can be used here as well by using a styles object as the second operand.
+```alpine
+<div x-bind:style="true && { color: 'red' }">
+
+<!-- Will render: -->
+<div style="color: red;">
+```
+
 One advantage of this approach is being able to mix it in with existing styles on an element:
 
 ```alpine