/ / UL Akkordeon in Stiftung 4 - zurb-foundation

UL Akkordeon in Stiftung 4 - zurb-foundation

Ich bin neu bei Foundation 4 und wir verwenden derzeit Foundation 4 in unserem Projekt MVC4 + Foundation 4 (durch das NuGet-Paket)

Wir wollen Akkordeons für unsere Ansichten verwenden.

Stiftung 4 bietet Sektionen; http://foundation.zurb.com/docs/components/section.html Aber da dies auf der Website zu langweilig aussieht, haben wir uns das Fundament 3 Akkordeon angesehen, das unserer Webseite entspricht; http://foundation.zurb.com/old-docs/f3/elements.php. Benötigen Experten helfen zu verstehen, wie wir das Look & Feel von Akkordeonsektionen ähnlich dem in Foundation 3 verfügbaren machen können.

Wir wissen, dass Foundation 4 keine Bilder mehr anbietet, also wie können wir die kleinen Icons rechts implementieren?

Antworten:

0 für die Antwort № 1

Ich bin kein Experte, aber wenn ich es richtig verstehe, möchte ich nur das kleine Dreiecksbild auf der rechten Seite hinzufügen. Erstens, verwenden Sie scss-Dateien? Wenn nicht, sollten Sie es auf jeden Fall überprüfen Hier. Alles, was Sie brauchen, ist zu installieren diese Visual Studio Plugin, dann herunterladen und hinzufügen zub-foundation scss-Dateien zu deinem Projekt.

Gehen Sie als Nächstes in die Datei _section.scss und suchen Sie nach diesem Teil des Codes:

@mixin section($section-type:accordion) {

// Accordion styles
@if $section-type == accordion {

border-top: $section-border-size $section-border-style $section-border-color;
position: relative;

.title {
top: 0;
cursor: pointer;
width: 100%;
margin: 0;
background-color: $section-title-bg;

***********************************
*** add a background image here ***
***********************************

a {
padding: $section-padding;
display: inline-block;
color: $section-title-color;
font-size: emCalc(14px);
white-space: nowrap;
width: 100%;
}
&:hover { background-color: darken($section-title-bg, $section-function-factor/2); }
}

.content {
display: none;
padding: $section-padding;
background-color: $section-content-bg;

&>*:last-child { margin-bottom: 0; }
&>*:first-child { padding-top: 0; }
&>*:last-child { padding-bottom: 0; }
}


&.active {
.content { display: block; }
.title { background: $section-title-bg-active;

**********************************************
*** add the "active" background image here ***
**********************************************
}

}


}

Es gibt zwei Möglichkeiten, das Dreieck hinzuzufügen, entweder verwenden Sie ein Bild Ihrer Wahl, oder noch besser, verwenden Sie die CSS-Funktion von foundation, die Dreiecke erzeugt!

@include css-triangle(5px, #aaaaaa, top);

Hinweis: Ich habe nicht getestet, die Abschnitte der Foundation zu modifizieren, aber ich bin mir ziemlich sicher, dass dies den Trick machen sollte.


0 für die Antwort № 2

SCSS ist immer die beste Option. Für andere, die noch nicht bereit sind, in SCSS einzutauchen, können Sie dies über CSS tun. Geben Sie in Ihrer CSS-Datei einfach Folgendes ein:

.section-container.accordion > section > .title:after,
.section-container.accordion > .section > .title:after {
content: "25B8";
position:absolute;
right:10px;
font-size:22px;
}
.section-container.accordion > section.active > .title:after,
.section-container.accordion > .section.active > .title:after {
content: "25BE";
position:absolute;
right:10px;
font-size:22px;
}

Natürlich können Sie die Schriftgröße beliebig ändern oder einfach weglassen. Hoffentlich hilft das.


Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen