Sublime Forum

Bootstrap 4 snippets - variables for multiple sections

#1

Hey,

I’m using bootstrap a lot, I already had a number of snippets but figured something like Bootstrap 4 snippets would have more. So far pretty happy with the pluggin.

However there’s one annoying thing which might either be a BS4-snippets specific issue or perhaps due to me not understanding Sublime text behavior.

Say I try to add an accordeon menu, like so. I type & tab it

b4acc & get the auto-complete option, then selection the entry for that boilerplate, all is great:

<div id="accordion" role="tablist" aria-multiselectable="true">
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingOne">
			<h4 class="panel-title">
				<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
					Collapsible Group Item #1
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
			headingOne
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingOne">
			<h4 class="panel-title">
				<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseOne">
					Collapsible Group Item #1
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
			headingOne
		</div>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading" role="tab" id="headingOne">
			<h4 class="panel-title">
				<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseOne">
					Collapsible Group Item #1
				</a>
			</h4>
		</div>
		<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
			headingOne
		</div>
	</div>
</div>

However at that point, I have multiple cursors. But they edit the content of each section to the same thing - e.g. href="#collapseOne"… So that means that the reference makes all the section collapse (since all href="#collapseOne", and for the corresponding sections id=“collapseOne”). I cannot seem to auto-number them so that the first link works with the 1 section, the 2nd one with the 2nd only, etc.

I guess what I’d like to be able to do would be the equivalent of the auto-numbering with emmet. For instance (in emmet, the $ sign will auto-number each instance):

Any idea? Open to any suggestion to accomplish this, be it wrt to the plugging, or adding functionality with sublime text…

0 Likes
#2

Without seeing the snippet to say for sure, this sounds like an issue with the plugin and/or the snippets that it’s providing. Sublime has the ability to have both multiple fields in a snippet that you fill out in sequence as well as having the same field referenced in multiple places so that you can edit all of them at once.

For example in this Python snippet, the name of the Class that’s created appears multiple places in the boilerplate, so when the snippet expands you get the option to edit them all at once:

image

However, pressing Tab still allows for cycling through other fields in the snippet; in this example the second field is the class being subclassed:

image

If that package is providing a snippet that expands out multiple sections but it’s doing it in a way where you edit them all simultaneously, that seems like an indication that the snippet it’s inserting is either not setting up fields correctly or assuming that in most cases you want to edit them all in the same way.

There are some built in ways to accomplish auto numbering, such as the Arithmetic command which you can find in the command palette. Apart from that, the first thing that comes to mind is using Emmet for the situations where you want this behaviour though.

0 Likes
#3

There’s an up-to-date bootstrap autocomplete package now: https://packagecontrol.io/packages/BootstrapAutocomplete

From @jfcherng

0 Likes
#4

No. That package only contains CSS class name AC.

1 Like