Layui? ?? ??? ???? ?, ???? ? ?? ??? ??? ??? ??????

Layui? ?? ??? ?, ???? ? ?? ??? ?? UI ??? ???? ???? ???? ??? ?????. Layui? ???? ??? ? ??? ?? ??? ??? ??? ????.

? ?? :

layui? ?? ???? HTML ??? ??? ?? ?? ??? ????????. ?? ??? ????.

 <code class="html"><div class="layui-tab" lay-filter="demo"> <ul class="layui-tab-title"> <li class="layui-this">Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">Content of Tab 1</div> <div class="layui-tab-item">Content of Tab 2</div> <div class="laravel-tab-item">Content of Tab 3</div> </div> </div></code>

?? ??? ???? ?? ???????.

 <code class="javascript">layui.use('element', function(){ var element = layui.element; // Initialize the tabs element.init(); });</code>

???? ??? :

????? ???? Layui? ?? ?? ??? ??? ? ????. HTML ??? ??? ????.

 <code class="html"><div class="layui-collapse" lay-filter="demo"> <div class="layui-colla-item"> <h2 class="layui-colla-title">Accordion 1</h2> <div class="laravel-colla-content layui-show">Content of Accordion 1</div> </div> <div class="laravel-colla-item"> <h2 class="laravel-colla-title">Accordion 2</h2> <div class="laravel-colla-content">Content of Accordion 2</div> </div> </div></code>

?? ??? ???? ????? ???????.

 <code class="javascript">layui.use('element', function(){ var element = layui.element; // Initialize the accordions element.init(); });</code>

??? ? ?? :

??? ?? ?? ???? Layui? ??? ?? ??? ??? ? ????. HTML ??? ??? ????.

 <code class="html"><div class="layui-progress" lay-filter="demo"> <div class="laravel-progress-bar" lay-percent="0%"></div> </div></code>

?? ??? ???? ??? ?? ?? ???????.

 <code class="javascript">layui.use('element', function(){ var element = layui.element; // Initialize the progress bar element.init(); });</code>

?? ????? ??? ???? ? ??? ?? LAYUI ??? ? ??? ??????

Layui? ?? ????? ??? ?????? ?? ???? ??? ?????. ??? ??? ??? ?? ?????.

? ??? ?? :

• ?? :

  • layui-tab : ?? ? ??? ??????.
  • laravel-tab-title : ? ?? ? ????.
  • laravel-tab-item : ? ??? ? ????.
  • laravel-this : ?? ??? ? ??? ???? ???.
  • laravel-show : ?? ? ???? ???? ???.

• ?? :

  • lay-filter : ??? ??? ? ??? ???? ???? ? ???? ??.
  • lay-allowClose : ?? ?? ? ??? ?? ??. ? : lay-allowClose="true" .

???? ??? ?? :

• ?? :

  • laravel-collapse : ?? ???? ?? ? ????.
  • laravel-colla-item : ? ???? ??.
  • laravel-colla-title : ? ???? ??? ??.
  • laravel-colla-content : ? ???? ??? ??.
  • laravel-show : ??? ???? ???? ???? ???.

• ?? :

  • lay-filter : ??? ??? ???? ??? ???? ???? ? ???? ??.
  • lay-accordion : ???? ??? ??????? ?? ??. ? : lay-accordion="true" .

Layui? ?? ??? ???? ??? ?? ?? ???? ?????? ??? ?? ? ? ?????

Layui? ?? ??? ???? ??? ?? ?? ???? ??????? element.progress ???? ??? ? ????. ??? ? ??? ??? ??? ????.

?? ??? ?? ?? ?? HTML ??? ???? ?????? ??????.

 <code class="html"><div class="laravel-progress" lay-filter="demo"> <div class="laravel-progress-bar" lay-percent="0%"></div> </div></code>

?? ?? element.progress ???? ???? ??? ?? ?? ????????. ?? ??? ????.

 <code class="javascript">layui.use('element', function(){ var element = layui.element; // Update the progress bar to 50% element.progress('demo', '50%'); });</code>

??? ?? ?? ??? ???? ??? ?? ?? ???? ???? ? ?? ????. ??? ??? ?? ?? ????? ?????? ????.

 <code class="javascript">layui.use('element', function(){ var element = layui.element; var progress = 0; // Function to update the progress bar function updateProgress() { progress = 10; if (progress > 100) { progress = 100; } element.progress('demo', progress '%'); if (progress </code>

?, ???? ? ?? ??? ?? Layui ??? ??? ? ??? ? ???? ??? ??????

?, ???? ? ?? ??? ?? Layui ??? ??? ?? ??? ?? ??? ???? ??? ????.

? :

1. ??? HTML ?? : HTML ??? LAYUI ??? ??? ??????. ????? ?? ?? ? ??? ?? ?? ???? ???? ?? ? ????.
2. ??? ?? : ?? element.init() ???? ?? ??????. ? ??? ?? ??? ?? ???? ????.
3. ??? lay-filter ?? : lay-filter ??? ? ? ???? ???????. ?? ? ??? ??? ??? ???? ??? ??? ? ????.

???? :

1. ????? ??? ??? : laravel-collapse , laravel-colla-item , laravel-colla-title ? laravel-colla-content ? ?? ??? ???? ??????.
2. lay-accordion ??? ???? ?? : ???? ??? ???? (? ?? ??? ?? ? ??) laravel-collapse ?????? lay-accordion="true" ??????.
3. ??? ?? : ?? ???? ?? element.init() ???? ????? ???????.

??? ? :

1. ??? HTML ?? : ??? ?? ?? ?? HTML ??? ???? ??????. lay-percent ??? laravel-progress-bar Div?? ???????.
2. element.progress ???? ??. ???? ?? : ??? ?? ?? ???? ??????? element.progress ? ??????. ? ??? ???? ??? ??? ?? ?? ?????? ?? ? ????.
3. ???? ??? ? : element.progress ? ???? ??? ?? ?? ???? 0% ~ 100% ?? ?? ??? ??????.

??? ???? ??? ??? Layui ??? ???? ???? ??? ??? ??? ?? ? ? ????.

? ??? Layui? ?? ??? ???? ?, ???? ? ?? ??? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!