Enterprise: عرض القائمة: ينتقل شريط الأدوات الموجود في القائمة إلى جميع الأزرار لتتجاوز في المظهر العلوي

أقترح محاولة التغيير إلى شريط الأدوات المرن هنا؟ هل هذا ممكن؟

لقد عملت قليلاً على مثال يمكن نسخه إلى مكونات ملف جديدة / listview / test-toolbar.html بناءً على ما أراه على الرابط.

<div class="row">
  <div class="twelve columns">
      <h2 class="fieldset-title">ListView - With a Toolbar</h2>
  </div>
</div>

<div class="row">
  <div class="twelve columns">
    <div class="card" >
      <div class="card-header">
        <h2 class="card-title">Tasks</h2>
        <button class="btn-actions" type="button">
          <span class="audible">Actions</span>
          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
            <use xlink:href="#icon-more"></use>
          </svg>
        </button>
        <ul class="popupmenu">
          <li><a href="#">Add new action item</a></li>
          <li><a href="#">Regular action</a></li>
          <li><a href="#">Individual Action</a></li>
        </ul>
      </div>

      <div class="card-content">
        <div class="listview" id="task-listview" data-options="{'source': '{{basepath}}api/inventory-tasks', 'template': 'task-tmpl', 'selectable': 'false'}"></div>
      </div>
    </div>

  </div>
</div>

{{={{{ }}}=}}
<script id="task-tmpl" type="text/html">
  <ul>
    {{#dataset}}
      <li>
        <p class="listview-heading">Task #{{task}}</p>
        <p class="listview-subheading">{{desc}} </p>
        <p class="listview-micro">Due: {{date}}</p>
        <div id="regular-toolbar-example" class="toolbar" data-options="{'rightAligned': true}" role="toolbar">
          <div class="buttonset">

            <button id="btn-row" class="btn" type="button">
              <span>Find in Organizational tree</span>
            </button>

            <button id="btn-category" class="btn" type="button">
              <span>Find in Organizational Chart</span>
            </button>

            <button id="btn-share" class="btn" type="button">
              <span>Find in Employee List</span>
            </button>
          </div>
        </div>
        </li>
    {{/dataset}}
  </ul>
</script>

هذا يعمل بشكل جيد. لذلك سوف تحتاج إلى بعض المساعدة في التكاثر. ملاحظة واحدة في هذا المثال إذا قمت بإزالة الخيار الصحيح الذي يبدو أنك تستخدمه ، فسيتم قطع زر واحد في موضوع رفع.

يبدو أيضًا أن إعداده مثل هذا يعمل أيضًا ، لذا فإن هذا يستحق الاختبار من جانبك.

        <div id="regular-toolbar-example" class="toolbar"role="toolbar">
          <div class="title">
            &nbsp;
          </div>
          <div class="buttonset">

لقد دفعت عينة tmcconechy إلى هذا الفرع للاختبار: 2530-toolbar-menu-cutoff-issue

إذا قمت بسحب ذلك ، فقم ببناء التطبيق وتشغيله وانتقل إلى http: // localhost : 4000 / component / listview / test-listview-inline-toolbars.html؟ theme = uplift ، يبدو أنه يعمل بشكل جيد. بقدر ما يذهب شريط الأدوات القياسي ، قد يكون هناك شيء آخر في اللعب لا نراه.

أقترح أيضًا تجربة شريط أدوات Flex إن أمكن ، نظرًا لأن التخطيط المستند إلى CSS يتعامل بشكل أفضل مع هذه الأنواع من مشكلات التخطيط.

كانت هذه في الواقع قاعدة في css الخاصة بنا حيث حددت ارتفاع السطر صغيرًا جدًا. لذلك لا حاجة لفعل أي شيء في الضوابط.