Question

我正在Materializecss开发一个简单的网站，并在我的应用首页上使用整页滑块。现在我的滑块有多个图像。我想在滑块上放一个按钮和一个带有一些内容的div，这需要与所有图像共用。这样做的一种方法是在滑块中的所有图像中放置相同的按钮和div，但这太愚蠢了，所以我想在所有页面上放置一个按钮和div。

<div class="slider fullscreen "> 
   <ul class="slides"> 
     <li> <img src="abcd.jpg"> <!-- random image --> 
        <div class="caption left-align"> 
          <h3>XXXX</h3> 
            <h5 class="light grey-text text-lighten-3">YYYYY</h5> 
              <a class="waves-effect waves-light btn">Click to login further</a>
         </div> 
     </li>  
   <li> <img src="efgh.jpg"> <!-- random image --> 
        <div class="caption right-align"> 
          <h3>XXXX</h3> 
            <h5 class="light grey-text text-lighten-3">DDD</h5> 
              <a class="waves-effect waves-light btn">Click to login further</a>
         </div> 
     </li> 
  </ul> 
</div>

此外，我还没有任何关于如何在滑块上添加div的线索，这对滑块中的所有图像都是通用的。我已经尝试将下面的代码放在滑块内，但它没有用。

<div class = "col s6-mine teal lighten-3 z-depth-3">
   <center><p>Material <br> Its a material design test page</p></center>
</div>
<div class = "col s6-mine teal lighten-3 z-depth-3">
   <center><p>Test<br> Trying putting div</p></center>
</div>

我将非常感谢任何帮助或任何指导。

由于

Answer 1

public class CustomEntryRenderer : EntryRenderer
{
    /// <summary>
    /// Instance of our Custom control declared in the PCL part.
    /// </summary>
    CustomEntry customEntry;

    /// <summary>
    /// We override the OnElementChanged() event handler to get the desired instance. We also use it for updates.
    /// </summary>
    /// <param name="e">It contains either the NewElement or the OldElement.</param>
    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            customEntry = e.NewElement as CustomEntry;

            if (customEntry != null)
            {
                SetTextAlignment();
                SetBorderPresence();
                SetTextColor();
            }
        }
    }


    /// <summary>
    /// The on element property changed callback.
    /// </summary>
    /// <param name="sender">The sender.</param>
    /// <param name="e">The <see cref="PropertyChangedEventArgs"/>Instance containing the event data.</param>
    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == CustomEntry.XAlignProperty.PropertyName)
            SetTextAlignment();
        else if (e.PropertyName == CustomEntry.HasBorderProperty.PropertyName)
            SetBorderPresence();
        else if (e.PropertyName == CustomEntry.TextColorProperty.PropertyName)
            SetTextColor();
    }

    /// <summary>
    /// Sets the text alignment.
    /// </summary>
    /// <param name="view">The view.</param>
    private void SetTextAlignment()
    {
        switch (customEntry.XAlign)
        {
            case Xamarin.Forms.TextAlignment.Center:
                Control.TextAlignment = Windows.UI.Xaml.TextAlignment.Center;
                break;
            case Xamarin.Forms.TextAlignment.End:
                Control.TextAlignment = Windows.UI.Xaml.TextAlignment.Right;
                break;
            case Xamarin.Forms.TextAlignment.Start:
                Control.TextAlignment = Windows.UI.Xaml.TextAlignment.Left;
                break;
        }
    }

    /// <summary>
    /// Sets the border presence.
    /// </summary>
    private void SetBorderPresence()
    {
        if (!customEntry.HasBorder)
        {
            Control.BorderThickness = new Windows.UI.Xaml.Thickness();
        }
    }

    /// <summary>
    /// 
    /// </summary>
    private void SetTextColor()
    {
        Debug.WriteLine("-- HEY --");
        Control.IsColorFontEnabled = true;
        Control.SelectionHighlightColor = new SolidColorBrush(Windows.UI.Color.FromArgb(126, 255, 255, 255));
        Control.Foreground = new SolidColorBrush(Windows.UI.Color.FromArgb(126, 255, 255, 255));
        Control.ForegroundFocusBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(126, 255, 255, 255));
        Control.PlaceholderForegroundBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(126, 255, 255, 255));
        Control.PlaceholderForegroundFocusBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(126, 255, 255, 255));
        Control.BackgroundFocusBrush = new SolidColorBrush(Windows.UI.Color.FromArgb(126, 255, 255, 255));
        Debug.WriteLine("-- HEY --");
    }
}

    $(document).ready(function() {
      $('.slider').slider({
        full_width: true
      });
    });

.buttons-wrapper {
  position: absolute;
  height: calc(100vh);
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 997;
  top: 0;
  pointer-events: none;
  width: 100%;
}
.buttons-wrapper a {
  pointer-events: auto;
}
.mg-rg {
  margin-right: 1rem;
  margin-left: 1rem;
  margin-top: 1rem;
}

这就是你要找的东西。如果不是我可能不明白你想要实现的目标

将修复按钮添加到滑块中的所有图像 - 实体化设计

1 个答案: